サイドナビゲーション（NavLink）
サイドバー内のナビゲーションリンクUIを、Mantine・Ant Design・shadcn/ui・Chakra UI・MUI・CSS/Tailwind の6種で比較。 アクティブ状態・アイコン・ネスト（子メニュー）・バッジ・無効状態など、実践的なパターンをインタラクティブに確認できます。
Mantine NavLink
Mantineが提供するサイドナビゲーション専用コンポーネント。leftSection・rightSection・active・disabled をprops で制御し、子要素を渡すだけでネスト構造を実現。Styles API によるスタイルカスタマイズも容易。
leftSection / rightSectionactive propネスト対応disabledStyles API
読み込み中...
tsx
'use client';
import { useState } from 'react';
import { MantineProvider, NavLink } from '@mantine/core';
import '@mantine/core/styles.css';
const navItems = [
{ id: 'dashboard', label: 'ダッシュボード', icon: '🏠' },
{ id: 'analytics', label: 'アナリティクス', icon: '📊' },
{ id: 'settings', label: '設定', icon: '⚙️' },
];
export function MantineNavlinkDemo() {
const [active, setActive] = useState('dashboard');
return (
<MantineProvider>
<nav style={{ width: 220, padding: 8 }}>
{navItems.map((item) => (
<NavLink
key={item.id}
label={item.label}
leftSection={<span>{item.icon}</span>}
active={active === item.id}
onClick={() => setActive(item.id)}
/>
))}
</nav>
</MantineProvider>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Mantineを使ったサイドナビゲーション（NavLink）UIを実装してください。
- 使用ライブラリ: @mantine/core の NavLink コンポーネント
- leftSection で アイコン（絵文字）を表示
- rightSection でバッジ（NEW など）を右側に表示
- active prop と useState でアクティブ状態を管理（クリックで切り替え）
- 子要素を持つ NavLink で折りたたみ可能なネスト構造を実装（opened / onClick で制御）
- childrenOffset={28} でインデントを設定
- disabled prop で無効状態のリンクを表示
- href="#" と component="a" で a タグとして動作させる⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| 項目 | Mantine | Ant Design | shadcn/ui | Chakra UI | MUI | CSS / Tailwind |
|---|---|---|---|---|---|---|
| アクティブ状態管理 | ✅ active prop | ✅ selectedKeys | ✅ variant切り替えで表現 | ✅ Tailwind className で管理 | ✅ selected prop | ✅ className で自作 |
| ネスト対応 | ✅ children で自動 | ✅ items.children | ⚠️ 手動で実装 | ⚠️ 手動で実装 | ✅ Collapse + List | ⚠️ 手動実装 |
| アイコン統合 | ✅ leftSection | ✅ icon prop | ✅ children に自由配置 | ✅ children に自由配置 | ✅ ListItemIcon | ✅ 自由配置 |
| バッジ・右側要素 | ✅ rightSection | ⚠️ label 内に JSX | ✅ Badge コンポーネントで実装 | ✅ Badge コンポーネントで実装 | ✅ Badge 統合 | ✅ 自由配置 |
| 無効状態 | ✅ disabled prop | ✅ disabled: true | ✅ disabled prop | ✅ disabled prop | ✅ disabled prop | ⚠️ aria-disabled で対応 |
| アニメーション | ✅ 内蔵（折りたたみ） | ✅ 内蔵（スライド） | ⚠️ 手動で実装 | ⚠️ CSS transition で自作 | ✅ Collapse（折りたたみ） | ⚠️ transform で自作 |
| TypeScript | ✅ 完全サポート | ✅ 完全サポート | ✅ 完全サポート | ✅ 完全サポート | ✅ 完全サポート | ✅ 完全サポート |
| バンドルサイズ | ⚠️ 中 | ⚠️ 中〜大 | ✅ 使った分だけ | ⚠️ 中（emotion含む） | ⚠️ 中（Emotion込み） | ✅ ゼロ追加 |
選択のポイント
- Mantine — leftSection・rightSection・active・disabled をすべてpropsで宣言的に制御でき、子要素を渡すだけでネスト構造が完成する。Styles API でスタイルも柔軟にカスタマイズ可能。Mantineを既に採用しているプロジェクトでの管理画面サイドバーに最適。
- Ant Design — mode="inline" の Menu は selectedKeys・openKeys を管理するだけで完全なサイドナビを実現。items 配列の宣言的 API で複雑な階層構造も簡潔に記述できる。Ant Designのエコシステムを活用する管理画面・ダッシュボードに向いている。
- MUI — 週670万DLと圧倒的なシェアを誇るMaterial Design準拠のライブラリ。エンタープライズ〜スタートアップまで幅広く採用され、ドキュメントや事例が豊富。ListItemButton の selected prop でアクティブ状態を管理し、Collapse でネスト展開を実現。Emotion（CSS-in-JS）を使用するため、Tailwind CSS v4との併用時はスタイルをMUI側のpropsで制御することを推奨。
- shadcn/ui — NavLink専用コンポーネントはないが、ButtonとBadgeを組み合わせることで柔軟なサイドナビを実装できる。variantの切り替えでアクティブ状態を表現し、デザインを完全にコントロールできる。コードが手元にあるため独自カスタマイズも容易。
- Chakra UI — NavLink 専用コンポーネントはないが、Stack と Badge を組み合わせることで バッジ付きのサイドナビゲーションを柔軟に構築できる。アクティブ状態は Tailwind で管理し、 ネスト構造が必要な場合は Mantine や Ant Design を検討する。
- CSS / Tailwind CSS — 依存ゼロでプロジェクト固有のデザインシステムに完全準拠できる。aria-current="page" などアクセシビリティの細かな制御も自由自在。デザインシステムが確立したプロダクトや、ライブラリの制約なしに作り込みたい場合に最適。
Zenn