サイドバー・ドロワーナビゲーション

折りたたみ対応のサイドバーとオーバーレイ型ドロワーを、Mantine・Ant Design・shadcn/ui・MUI・Chakra UI の5種で比較します。各デモではサイドバーの折りたたみ（アイコンのみ）とドロワー（オーバーレイ）の2パターンを操作できます。

@mantine/corev9.1.1 antdv6.3.7 @mui/materialv9.0.0 @chakra-ui/reactv3.34.0

Mantine

NavLink コンポーネントでグループ化されたナビゲーションを構築。Drawer コンポーネントでオーバーレイ型のモバイルナビゲーションも提供。Badge との組み合わせで通知数の表示も容易。

NavLinkDrawerBadgeProvider必須

読み込み中...

tsx

'use client';
import { MantineProvider, NavLink } from '@mantine/core';
import { useState } from 'react';
import '@mantine/core/styles.css';

const navItems = [
  { label: 'ダッシュボード', icon: '📊' },
  { label: 'ユーザー管理', icon: '👥' },
  { label: '設定', icon: '⚙️' },
];

export function MantineSidebarDemo() {
  const [active, setActive] = useState('ダッシュボード');
  return (
    <MantineProvider>
      <div style={{ display: 'flex', height: '100vh' }}>
        <nav style={{ width: 220, background: '#f8fafc', borderRight: '1px solid #e2e8f0', padding: 16 }}>
          {navItems.map((item) => (
            <NavLink
              key={item.label}
              label={item.label}
              leftSection={<span>{item.icon}</span>}
              active={active === item.label}
              onClick={() => setActive(item.label)}
            />
          ))}
        </nav>
        <main style={{ flex: 1, padding: 24 }}>メインコンテンツ</main>
      </div>
    </MantineProvider>
  );
}

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

React + Tailwind CSSで、Mantineを使ったサイドバー・ドロワーナビゲーションUIを実装してください。
- 使用ライブラリ: @mantine/core の NavLink / Drawer / Badge / AppShell、MantineProvider必須
- NavLink の active / variant props でアクティブ項目をハイライトする
- NavLink に leftSection / rightSection を使ってアイコンとバッジ（通知数）を配置する
- セクションラベルで項目をグループ分けして表示する
- Drawer コンポーネントでオーバーレイ型のモバイルナビゲーションを実装し、背景クリックで閉じる
- CSS transition でサイドバーの折りたたみ（アイコンのみ表示）アニメーションを実装する

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

ライブラリ比較

項目	Mantine	Ant Design	Shadcn/ui	MUI	Chakra UI
サイドバー	NavLink 組み合わせ	Layout.Sider + Menu	Tailwind 自前実装	✅ Drawer コンポーネント	Tailwind で自前実装
ドロワー	✅ Drawer コンポーネント	✅ Drawer コンポーネント	✅ Sheet（自前実装）	✅ Drawer（temporary）	✅ Drawer.Root / Content
折りたたみ	✅ 手動制御	✅ collapsible prop	✅ CSS transition	⚠️ 手動実装（width切り替え）	✅ CSS transition で制御
グループ分け	✅ セクション手動	✅ Menu type=group	✅ 自前マークアップ	✅ Divider で区切り	✅ 自前マークアップ
バッジ通知	✅ Badge コンポーネント	✅ Badge コンポーネント	✅ 自前スタイル	✅ ListItemIcon で対応	✅ 自前スタイル
アニメーション	CSS transition	CSS transition（組み込み）	CSS transition / keyframes	✅ デフォルトで付与	✅ 組み込み
カスタマイズ性	中（style上書き）	中（token + CSS）	高（完全自前）	中（sx prop）	✅ emotion + Tailwind で対応

選択のポイント

Mantine — NavLink のactive/variant 切り替えが便利で、Drawer も Provider 内で簡単に呼び出せる。サイドバーとドロワーを統一的に管理したい場合に最適。
Shadcn/ui — Provider不要でバンドルサイズが最小。Tailwind CSS との親和性が高く、アニメーションやレイアウトを完全に制御したい場合に最適。既存のデザインシステムに合わせやすい。
Ant Design — Menu の grouping やネスト構造を宣言的に記述できる。Sider の collapsible 制御が組み込みで、管理画面やエンタープライズ向けに安定した選択肢。
Chakra UI — Drawer.Root / Backdrop / Content の複合パターンでオーバーレイナビゲーションを実装。 placement で4方向の展開に対応し、Portal でDOM外にレンダリングするため z-index 問題が起きにくい。サイドバー本体は Tailwind で自前実装し、ドロワーに Chakra UI を組み合わせる構成が相性よい。
MUI — 週670万DLと圧倒的なシェアを誇るMaterial Design準拠のライブラリ。エンタープライズ〜スタートアップまで幅広く採用され、ドキュメントや事例が豊富。Emotion（CSS-in-JS）を使用するため、Tailwind CSS v4との併用時はスタイルをMUI側のpropsで制御することを推奨。

サイドバーは、画面の左右に固定または開閉できるナビゲーションパネルUI。メニュー項目・フィルター・コンテンツ目次などを縦方向に並べる。

管理画面・ドキュメントサイト・ECサイトのカテゴリフィルターなど、階層的なナビゲーションが必要なページで使われる。

主なバリエーション