ブレッドクラム（Breadcrumb）

現在のページ階層を示すブレッドクラムUIを、Mantine・Ant Design・shadcn/ui・Chakra UI・MUI・CSS/Tailwind の6種で比較。セパレーターのカスタマイズ・アイコン統合・ドロップダウンメニュー・ルーティング連携など、実践的な使用例をインタラクティブに確認できます。

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

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	shadcn/ui	Chakra UI	MUI	CSS / Tailwind
宣言的API	⚠️ 子要素として渡す	✅ items 配列で定義	✅ Compound Components	✅ Compound Components	✅ children として渡す	⚠️ 自作
セパレーターカスタマイズ	✅ separator prop	✅ separator prop	✅ children に任意 JSX	✅ Breadcrumb.Separator に JSX	✅ separator prop（自由）	✅ 自由に設定可能
アイコン対応	✅ Anchor 内に自由配置	✅ title 内に配置	✅ children に自由配置	✅ Link 内に自由配置	✅ children に自由配置	✅ 手動で配置
ドロップダウンメニュー	❌ 非対応（自作が必要）	✅ menu prop で標準対応	⚠️ 手動で実装	⚠️ 非対応（手動実装）	❌ 非対応（自作が必要）	⚠️ 自作（手間が大きい）
ルーティング連携	⚠️ 手動で Link を使用	✅ itemRender でカスタム	✅ 手動で Link を使用	✅ href prop で対応	✅ Link コンポーネント内蔵	✅ 手動で Link を使用
省略表示	⚠️ 自作	⚠️ 自作	✅ BreadcrumbEllipsis	⚠️ 非対応（手動実装）	✅ maxItems prop	⚠️ 自作
アクセシビリティ	⚠️ 最低限（セパレーター付与のみ）	✅ nav + aria 対応	✅ WAI-ARIA準拠（Radix UI）	✅ WAI-ARIA準拠	✅ aria-label 対応	⚠️ 実装者次第
テーマ連携	✅ MantineProvider	✅ ConfigProvider	✅ CSS変数で管理	✅ ChakraProvider	✅ ThemeProvider	✅ CSS変数で管理
TypeScript	✅ 完全サポート	✅ 完全サポート	✅ 完全サポート	✅ 完全サポート	✅ 完全サポート	✅ 完全サポート
バンドルサイズ追加	⚠️ 中	⚠️ 中	✅ 使った分だけ	⚠️ 中（emotion含む）	⚠️ 中（Emotion込み）	✅ ゼロ追加

選択のポイント

Mantine — シンプルさが最大の特徴。セパレーターの自動挿入とスタイルカスタマイズに特化しており、余計な機能がない分、学習コストが低い。ドロップダウンやルーティング連携が不要なシンプルな階層表示に最適。
Ant Design — items 配列の宣言的APIで定義が簡潔。ドロップダウンメニュー付きブレッドクラムや、itemRender による React Router / Next.js との連携など、実務的なパターンを標準でカバー。管理画面やECサイトなど階層の深いアプリケーションに向いている。
MUI — 週670万DLと圧倒的なシェアを誇るMaterial Design準拠のライブラリ。エンタープライズ〜スタートアップまで幅広く採用され、ドキュメントや事例が豊富。maxItems による省略表示と separator のカスタマイズが手軽で、Emotion（CSS-in-JS）を使用するため、Tailwind CSS v4との併用時はスタイルをMUI側のpropsで制御することを推奨。
shadcn/ui — Radix UIベースでアクセシビリティが標準対応。BreadcrumbEllipsisで省略表示も手軽に実装でき、セパレーターやアイコンを任意のJSXで置き換えられるためデザインの自由度が高い。コードが手元にあるため完全なカスタマイズが可能。
Chakra UI — Compound Components パターンで各パーツを明示的に組み立てる設計。 CurrentLink で現在ページを意味論的に表現でき、WAI-ARIA が標準対応。ドロップダウンや省略表示は非対応のため、シンプルな階層表示に適している。
CSS / Tailwind CSS— セマンティック HTML（nav + ol）を直書きでき、SEO 向けの JSON-LD 構造化データも自然に統合できる。aria-current="page" などアクセシビリティの細かな制御も自由自在。ランディングページやSEOを重視するサイトに最適。

ブレッドクラムは、現在のページ位置をサイト階層に沿ってリンクで示すナビゲーションUI。「ホーム > カテゴリ > ページ名」のようなパス表示をする。

ECサイトの商品ページ・ドキュメントサイト・多階層の管理画面など、ユーザーが現在地を把握しにくい深い階層のサイトで使われる。

主なバリエーション