ブレッドクラムコンポーネント

最終更新日: 7月 13, 2026

CSS のみの Tailwind CSS ブレッドクラムナビゲーション。カスタムセパレーターとアクセス可能なランドマークマークアップを備えています。 WCAG AA は、Django、HTMX、Laravel、React、およびあらゆる Tailwind CSS v4 プロジェクトで動作します。

ブレッドクラムコンポーネントはナビゲーション階層を表示し、ユーザーが Web サイト内の位置を理解するのに役立ちます。アクセシビリティのためにセマンティック HTML ナビゲーション要素と ARIA ランドマークを使用して構築されたブレッドクラムにより、ユーザーが親セクションにすばやく移動できるようになり、使いやすさが向上します。 Frutjam ブレッドクラムシステムはセパレータを自動的にレンダリングし、柔軟なスタイル設定のためのカスタムセパレータをサポートします。

CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

クラス	タイプ	説明
breadcrumb	ベース	ブレッドクラムトレイルのナビゲーションコンテナ
breadcrumb-list	修飾子	ブレッドクラム項目の順序付きリスト
breadcrumb-item	修飾子	ブレッドクラム内の個々のリスト項目
breadcrumb-link	修飾子	パンくずリンクとしてスタイル設定されたアンカー要素
breadcrumb-separator	修飾子	項目間の区切り要素
breadcrumb-current	修飾子	現在の (アクティブな) ページ項目をマークします。

基本的な使い方

区切り文字が指定されていない場合は、ブレッドクラム項目の間に矢印が自動的に表示されます。

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-current" aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>

<nav className="breadcrumb" aria-label="Breadcrumb">
  <ol className="breadcrumb-list">
    <li className="breadcrumb-item">
      <a href="/" className="breadcrumb-link">Home</a>
    </li>
    <li className="breadcrumb-item">
      <span className="breadcrumb-current" aria-current="page">Current Page</span>
    </li>
  </ol>
</nav>

コードを表示

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">/</span>
      <a href="/components" class="breadcrumb-link">Components</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">/</span>
      <span class="breadcrumb-current" aria-current="page">Badge</span>
    </li>
  </ol>
</nav>

コードを表示

<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol class="breadcrumb-list">
    <li class="breadcrumb-item">
      <a href="/" class="breadcrumb-link">Home</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </span>
      <a href="/components" class="breadcrumb-link">Components</a>
    </li>
    <li class="breadcrumb-item">
      <span class="breadcrumb-separator">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h14"></path>
          <path d="m12 5 7 7-7 7"></path>
        </svg>
      </span>
      <span class="breadcrumb-current" aria-current="page">Button</span>
    </li>
  </ol>
</nav>

コードを表示

スクリーンリーダーがパンくずリストにアクセスできるようにするには:

aria-label="Breadcrumb" を使用して、構造を <nav> 要素で囲みます。
最後の項目 (現在のページ) は aria-current="page" を使用する必要があり、できればリンクではなく <span> を使用してください。
セパレータはスクリーンリーダーによって無視される必要があります (物理要素を使用する場合は、CSS または aria-hidden="true" を介して処理されることがよくあります)。

Claude コード、Cursor、または別の AI エディターを使用していますか?

Cherry MCP は、AI エディタに正確なブレッドクラムクラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。

Cherry MCP を試してみる

ブレッドクラムコンポーネント

基本的な使い方

ブレッドクラムセパレーター

テキスト区切り付きのブレッドクラム

アイコン区切り付きのブレッドクラム

ブレッドクラムのアクセシビリティ

関連している