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

モバイル画面でナビゲーションを折りたたむハンバーガーメニューUIを、Mantine・Ant Design・shadcn/ui・MUI・CSS/Tailwind の5種で比較。アイコンのアニメーション・Drawer連携・レスポンシブ対応など、実践的な使用例をインタラクティブに確認できます。

@mantine/corev9.1.1 antdv6.3.7 @mui/materialv9.0.0 shadcn/uiv4.2.0

💡 ネイティブ実装： nav 要素とチェックボックスハックや details 要素だけでも、モバイル向けメニューを実装できます。ナビゲーションメニュー（nav） →

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-[var(--color-surface)]">
        <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の回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

ライブラリ比較

項目	Mantine	Ant Design	shadcn/ui	MUI	CSS / Tailwind
ハンバーガーコンポーネント	✅ Burger 専用コンポーネント	⚠️ なし（MenuOutlined で代替）	⚠️ 自作	⚠️ なし（Button で代替）
アイコンアニメーション	✅ ハンバーガー ↔ ✕ 自動遷移	❌ 静的アイコン	⚠️ 手動で実装	✅ sx + transition で実装	✅ CSS transition で自作
サイドパネル連携	✅ AppShell.Navbar で統合	✅ Drawer コンポーネント	✅ Sheet（top/bottom/left/right）	✅ Drawer（4方向対応）	⚠️ fixed + transform で自作
オーバーレイ	✅ 自動	✅ 自動	✅ 自動（Radix UI）	✅ 自動	⚠️ 手動で実装
Escapeキーで閉じる	✅ 自動	✅ 自動	✅ 自動（Radix UI）	✅ 自動	⚠️ 手動で実装
サブメニュー対応	⚠️ NavLink で実装	✅ Menu の SubMenu で対応	⚠️ 手動で実装	⚠️ List で手動実装	⚠️ 自作（手間が大きい）
テーマ連携	✅ MantineProvider	✅ ConfigProvider	✅ CSS変数で管理	✅ ThemeProvider	✅ CSS変数で管理
アクセシビリティ	✅ WAI-ARIA準拠	✅ WAI-ARIA準拠	✅ WAI-ARIA準拠（Radix UI）	✅ aria-label 対応	⚠️ 実装者次第
TypeScript	✅ 完全サポート	✅ 完全サポート	✅ 完全サポート	✅ 完全サポート	✅ 完全サポート
バンドルサイズ追加	⚠️ 中（AppShell含む）	⚠️ 中（Drawer + Menu）	✅ 使った分だけ	⚠️ 中（Emotion込み）	✅ ゼロ追加

選択のポイント

Mantine — AppShell と Burger が統合されており、レスポンシブなモバイルナビゲーションを最短で実装できる。breakpoint 制御、サイズバリエーション、アイコンアニメーションが標準装備。Mantine ベースのプロジェクトなら第一選択。
Ant Design — Drawer + Menu の組み合わせで、サブメニュー・アイコン付きリンク・テーマ切替など、多機能なサイドメニューを構築しやすい。管理画面やダッシュボードとの相性が良い。ハンバーガーアイコンのアニメーションは別途実装が必要。
MUI — 週670万DLと圧倒的なシェアを誇るMaterial Design準拠のライブラリ。エンタープライズ〜スタートアップまで幅広く採用され、ドキュメントや事例が豊富。IconButton + Drawer の組み合わせで実装し、sx propのtransitionでアイコンアニメーションも表現できる。Emotion（CSS-in-JS）を使用するため、Tailwind CSS v4との併用時はスタイルをMUI側のpropsで制御することを推奨。
shadcn/ui — SheetコンポーネントがDrawer相当の役割を担い、side propで上下左右から展開できる。Radix UIベースでフォーカストラップ・Escapeキー・オーバーレイが自動処理されるため、アクセシビリティを手軽に担保できる。
CSS / Tailwind CSS — 外部ライブラリへの依存をゼロにしたい、バンドルサイズを最小化したい場合に最適。アニメーションやアクセシビリティは自前で実装する分、完全にカスタマイズ可能。小規模サイトやランディングページに向いている。

ハンバーガーメニューは、3本線のアイコンをタップ・クリックするとナビゲーションが展開するUIパターン。モバイル向けのナビゲーション省スペース手法として広く使われる。

スマートフォン・タブレット向けWebサイトのナビゲーション格納、レスポンシブデザインでヘッダーのメニューを隠す場合に使われる。

主なバリエーション