← カテゴリ一覧に戻る

ハンバーガーメニュー（Hamburger Menu）

モバイル画面でナビゲーションを折りたたむハンバーガーメニューUIの実装を3つのアプローチで比較。 アイコンのアニメーション・Drawer連携・レスポンシブ対応など、実践的な使用例をインタラクティブに確認できます。

@mantine/corev8.3.15antdv6.3.0

Mantine Burger

Mantineが提供するハンバーガーアイコン専用コンポーネント。AppShellと連携し、breakpointに応じてNavbarの表示/非表示を自動制御。opened状態でハンバーガー ↔ ✕ にアニメーション遷移。

5サイズアイコンアニメーションAppShell統合breakpoint制御アクセシビリティ内蔵
読み込み中...
tsx
'use client';
import { MantineProvider, Burger } from '@mantine/core';
import { useState } from 'react';
import '@mantine/core/styles.css';

const navLinks = ['ホーム', 'について', 'サービス', 'お問い合わせ'];

export function MantineBurgerDemo() {
  const [opened, setOpened] = useState(false);
  return (
    <MantineProvider>
      <header className="flex items-center gap-3 px-4 h-14 border-b border-gray-200 bg-white">
        <Burger opened={opened} onClick={() => setOpened(!opened)} size="sm" aria-label="メニューを開く" />
        <span className="font-bold">MyApp</span>
      </header>
      {opened && (
        <nav className="border-b border-gray-200 bg-slate-50">
          {navLinks.map((link) => (
            <a key={link} href="#" className="block px-4 py-3 text-sm hover:bg-slate-100 border-b border-gray-100 last:border-0">
              {link}
            </a>
          ))}
        </nav>
      )}
    </MantineProvider>
  );
}

🤖 AIプロンプトテンプレート

React + Tailwind CSSで、Mantineを使ったハンバーガーメニューUIを実装してください。
- 使用ライブラリ: @mantine/core の Burger, AppShell コンポーネント + @mantine/hooks の useDisclosure
- AppShell.Header に Burger を配置し、AppShell.Navbar の開閉を制御
- Burger の hiddenFrom="sm" でモバイルのみ表示
- サイズ: sm（size prop で変更可能）
- Navbar 内にナビゲーションリンクを配置
- opened 状態でアイコンがハンバーガー ↔ ✕ にアニメーション遷移
- アクセシビリティ: aria-label="Toggle navigation" を設定

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

ライブラリ比較

項目MantineAnt DesignCSS / Tailwind
ハンバーガーコンポーネント✅ Burger 専用コンポーネント⚠️ なし（MenuOutlined で代替）⚠️ 自作
アイコンアニメーション✅ ハンバーガー ↔ ✕ 自動遷移❌ 静的アイコン✅ CSS transition で自作
サイドパネル連携✅ AppShell.Navbar で統合✅ Drawer コンポーネント⚠️ fixed + transform で自作
サイズバリエーション✅ xs〜xl（5段階）⚠️ アイコンサイズのみ変更可✅ 自由に設定可能
レスポンシブ制御✅ hiddenFrom / visibleFrom⚠️ CSS で自前対応✅ Tailwind md:hidden 等
サブメニュー対応⚠️ NavLink で実装✅ Menu の SubMenu で対応⚠️ 自作（手間が大きい）
テーマ連携✅ MantineProvider✅ ConfigProvider✅ CSS変数で管理
アクセシビリティ✅ WAI-ARIA準拠✅ WAI-ARIA準拠⚠️ 実装者次第
TypeScript✅ 完全サポート✅ 完全サポート✅ 完全サポート
バンドルサイズ追加⚠️ 中（AppShell含む）⚠️ 中（Drawer + Menu）✅ ゼロ追加

選択のポイント

  • Mantine — AppShell と Burger が統合されており、レスポンシブなモバイルナビゲーションを最短で実装できる。breakpoint 制御、サイズバリエーション、アイコンアニメーションが標準装備。Mantine ベースのプロジェクトなら第一選択。
  • Ant Design — Drawer + Menu の組み合わせで、サブメニュー・アイコン付きリンク・テーマ切替など、多機能なサイドメニューを構築しやすい。管理画面やダッシュボードとの相性が良い。ハンバーガーアイコンのアニメーションは別途実装が必要。
  • CSS / Tailwind CSS — 外部ライブラリへの依存をゼロにしたい、バンドルサイズを最小化したい場合に最適。アニメーションやアクセシビリティは自前で実装する分、完全にカスタマイズ可能。小規模サイトやランディングページに向いている。

同じカテゴリの他のページ

ブレッドクラム（Breadcrumb）

ブレッドクラムのサンプル。セパレーターカスタマイズ・アイコン統合・ドロップダウンメニュー・ルーティング連携などのUIパターン実例集。

水平メニュー（Horizontal Menu）

水平メニューのサンプル。サブメニュー・ドロップダウン・アクティブ状態・テーマ切替・レスポンシブ対応などのUIパターン実例集。

サイドナビゲーション（NavLink）

サイドバー内のナビゲーションリンクUIの実装比較。アクティブ状態・アイコン・ネスト・バッジなど実践的なパターンをインタラクティブに確認

同じライブラリを使っているページ

バッジ・タグ（Badge / Tag）

@mantine/coreantd

モーダル・ダイアログ（Modal / Dialog）

@mantine/coreantd

通知・トースト（Notification / Toast）

@mantine/coreantd
このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo