ブレッドクラム（Breadcrumb）
現在のページ階層を示すブレッドクラムUIの実装を3つのアプローチで比較。 セパレーターのカスタマイズ・アイコン統合・ドロップダウンメニュー・ルーティング連携など、実践的な使用例をインタラクティブに確認できます。
Mantine Breadcrumbs
Mantineが提供するシンプルなブレッドクラムコンポーネント。任意のReactノードを子要素として受け取り、カスタマイズ可能なセパレーターを自動挿入。Anchorと組み合わせてリンクを表現。
セパレーターカスタマイズAnchor連携Styles APIシンプル設計
読み込み中...
tsx
'use client';
import { MantineProvider, Breadcrumbs, Anchor, Text } from '@mantine/core';
import '@mantine/core/styles.css';
const items = [
{ title: 'ホーム', href: '/' },
{ title: 'カテゴリ', href: '/categories' },
{ title: 'ナビゲーション', href: '/categories/navigation' },
{ title: 'ブレッドクラム', href: undefined },
];
export function MantineBreadcrumbDemo() {
return (
<MantineProvider>
<Breadcrumbs separator="/">
{items.map((item, i) =>
item.href ? (
<Anchor key={i} href={item.href} underline="hover">{item.title}</Anchor>
) : (
<Text key={i} size="sm" c="dimmed">{item.title}</Text>
)
)}
</Breadcrumbs>
</MantineProvider>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Mantineを使ったブレッドクラムUIを実装してください。 - 使用ライブラリ: @mantine/core の Breadcrumbs, Anchor コンポーネント - items 配列から Anchor 要素を生成し、Breadcrumbs の子要素として渡す - separator prop でセパレーターをカスタマイズ（デフォルト "/"） - separatorMargin prop でセパレーターの余白を調整 - 最後のアイテムは Anchor ではなく Text で表示（非リンク） - Anchor に underline="hover" を設定
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| 項目 | Mantine | Ant Design | CSS / Tailwind |
|---|---|---|---|
| 宣言的API | ⚠️ 子要素として渡す | ✅ items 配列で定義 | ⚠️ 自作 |
| セパレーターカスタマイズ | ✅ separator prop | ✅ separator prop | ✅ 自由に設定可能 |
| アイコン対応 | ✅ Anchor 内に自由配置 | ✅ title 内に配置 | ✅ 手動で配置 |
| ドロップダウンメニュー | ❌ 非対応（自作が必要） | ✅ menu prop で標準対応 | ⚠️ 自作（手間が大きい） |
| ルーティング連携 | ⚠️ 手動で Link を使用 | ✅ itemRender でカスタム | ✅ 手動で Link を使用 |
| JSON-LD 構造化データ | ⚠️ 自作 | ⚠️ 自作 | ✅ 自作しやすい（HTML直書き） |
| セマンティック HTML | ⚠️ div ベース | ⚠️ nav + ol（v5で改善） | ✅ nav + ol を手動で構成 |
| テーマ連携 | ✅ MantineProvider | ✅ ConfigProvider | ✅ CSS変数で管理 |
| アクセシビリティ | ⚠️ 最低限（セパレーター付与のみ） | ✅ nav + aria 対応 | ⚠️ 実装者次第 |
| TypeScript | ✅ 完全サポート | ✅ 完全サポート | ✅ 完全サポート |
| バンドルサイズ追加 | ⚠️ 中 | ⚠️ 中 | ✅ ゼロ追加 |
選択のポイント
- Mantine — シンプルさが最大の特徴。セパレーターの自動挿入とスタイルカスタマイズに特化しており、余計な機能がない分、学習コストが低い。ドロップダウンやルーティング連携が不要なシンプルな階層表示に最適。
- Ant Design — items 配列の宣言的APIで定義が簡潔。ドロップダウンメニュー付きブレッドクラムや、itemRender による React Router / Next.js との連携など、実務的なパターンを標準でカバー。管理画面やECサイトなど階層の深いアプリケーションに向いている。
- CSS / Tailwind CSS — セマンティック HTML（nav + ol）を直書きでき、SEO 向けの JSON-LD 構造化データも自然に統合できる。aria-current="page" などアクセシビリティの細かな制御も自由自在。ランディングページやSEOを重視するサイトに最適。