サイドナビゲーション（NavLink）
サイドバー内のナビゲーションリンクUIの実装を3つのアプローチで比較。 アクティブ状態・アイコン・ネスト（子メニュー）・バッジ・無効状態など、実践的なパターンをインタラクティブに確認できます。
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 | CSS / Tailwind |
|---|---|---|---|
| アクティブ状態管理 | ✅ active prop | ✅ selectedKeys | ✅ className で自作 |
| ネスト対応 | ✅ children で自動 | ✅ items.children | ⚠️ 手動実装 |
| アイコン統合 | ✅ leftSection | ✅ icon prop | ✅ 自由配置 |
| バッジ・右側要素 | ✅ rightSection | ⚠️ label 内に JSX | ✅ 自由配置 |
| アニメーション | ✅ 内蔵（折りたたみ） | ✅ 内蔵（スライド） | ⚠️ transform で自作 |
| TypeScript | ✅ 完全サポート | ✅ 完全サポート | ✅ 完全サポート |
| バンドルサイズ | ⚠️ 中 | ⚠️ 中〜大 | ✅ ゼロ追加 |
選択のポイント
- Mantine — leftSection・rightSection・active・disabled をすべてpropsで宣言的に制御でき、子要素を渡すだけでネスト構造が完成する。Styles API でスタイルも柔軟にカスタマイズ可能。Mantineを既に採用しているプロジェクトでの管理画面サイドバーに最適。
- Ant Design — mode="inline" の Menu は selectedKeys・openKeys を管理するだけで完全なサイドナビを実現。items 配列の宣言的 API で複雑な階層構造も簡潔に記述できる。Ant Designのエコシステムを活用する管理画面・ダッシュボードに向いている。
- CSS / Tailwind CSS — 依存ゼロでプロジェクト固有のデザインシステムに完全準拠できる。aria-current="page" などアクセシビリティの細かな制御も自由自在。デザインシステムが確立したプロダクトや、ライブラリの制約なしに作り込みたい場合に最適。