パンくずリスト

hc-breadcrumb は、標準の <nav> → <ol> → <li> 構造の上の純 CSS スキンで、アクティブなステップに aria-current="page" を使います。セパレータは CSS の ::before で注入されるため、マークアップは装飾のノイズから自由なままです — スクリーンリーダーはデフォルトで生成コンテンツを無視します。

別名: パンくずリスト。

基本の HTML

<nav class="hc-breadcrumb" aria-label="Breadcrumb">
  <ol class="hc-breadcrumb__list">
    <li class="hc-breadcrumb__item">
      <a class="hc-breadcrumb__link" href="/">Home</a>
    </li>
    <li class="hc-breadcrumb__item">
      <a class="hc-breadcrumb__link" href="/docs">Docs</a>
    </li>
    <li class="hc-breadcrumb__item">
      <span class="hc-breadcrumb__current" aria-current="page">Components</span>
    </li>
  </ol>
</nav>

カスタムセパレータ

グリフを差し替えるには、--hc-breadcrumb-separator をグローバルに (スタイルシートで)、またはインスタンス単位で(インラインスタイルで) 上書きします。

<nav class="hc-breadcrumb" aria-label="Breadcrumb"
     style="--hc-breadcrumb-separator: '›'">
  …
</nav>

任意の CSS content 値が使えます — 引用符つき文字列、attr()、エスケープした Unicode、完全に独自のマーカーのためのインライン SVG url()。

中間の省略

深いパスでは、中間のステップを省略記号に畳みます。プレースホルダーに aria-hidden="true" を付けてスクリーンリーダーに無視させ、省略したステップへは別の場所(ナビゲーションメニュー、戻るボタンなど)から到達できるようにしてください。

<li class="hc-breadcrumb__item">
  <span class="hc-breadcrumb__ellipsis" aria-hidden="true">…</span>
</li>

畳まれたステップ(展開可能)

隠れたステップへ到達可能にするには、省略記号を、それらを列挙する hc-menu ポップオーバーを開く <button> にします。新しいビヘイビアは不要 — (デフォルトバンドルの)installMenu() がトリガーを自動配線します: popovertarget ボタンは aria-haspopup="menu" / aria-expanded を得て、ポップオーバーはその下にアンカーされ、矢印キー / Escape が機能します。

<li class="hc-breadcrumb__item">
  <button class="hc-breadcrumb__ellipsis" type="button"
          popovertarget="crumb-overflow" aria-label="Show 2 hidden levels">…</button>

  <div class="hc-menu" id="crumb-overflow" popover role="menu"
       aria-label="Hidden breadcrumb levels">
    <a class="hc-menu__item" role="menuitem" href="/products">Products</a>
    <a class="hc-menu__item" role="menuitem" href="/products/widgets">Widgets</a>
  </div>
</li>

プログレッシブエンハンスメント。 道筋は穏やかに畳まれます:

popovertarget はネイティブ HTML です — メニューは JavaScript なしでクリックで開きます。installMenu() はアンカーされた配置とキーボードのロービングを足すだけです。
popover 属性のないエンジンでは、メニューは単にインラインで描画されます(隠れたステップが見えたまま)。つまり完全な道筋は常に DOM の中にあります。

レスポンシブな畳み方。 畳むかどうかはレイアウトの判断です。デフォルトでは完全な道筋を描画し、幅のしきい値以下で畳んだマークアップに切り替えます — 例: <nav> に data-collapse を設定してコンテナクエリで切り替えをゲートするか、パスが N 階層を超えたらサーバサイドで畳んだ形を描画します。

アクセシビリティ

外側の <nav aria-label="Breadcrumb">(または aria-labelledby)がランドマークに名前を与え、支援技術がそこへスキップしたり出たりできます。
<ul> ではなく <ol> を使ってください — ステップには意味のある順序があります。
現在のページはリンクにしないでください: <span aria-current="page"> として描画すれば、ユーザーにクリックを誤解させずに視覚的な強調を受けられます。
セパレータのグリフは CSS の ::before で挿入されます。モダンブラウザは疑似コンテンツを DOM に公開しますが、デフォルトでアクセシビリティツリーからは除外します — 生成コンテンツに aria-hidden は不要です。
リンクのフォーカスアウトラインを保ってください。デフォルトはシステムの他の部分に合わせ、--hc-color-focus-ring を使った outline: 2px solid を設定します。

テーマ用トークン

component トークン(component.tokens.json):

トークンパス	用途
`breadcrumb.gap`	項目間(および項目とセパレータの間)のスペース。
`breadcrumb.font-size`	道筋全体のテキストサイズ。
`breadcrumb.separator-fg`	注入されるセパレータグリフと省略記号の色。
`breadcrumb.link.fg` / `hover-fg`	非アクティブなステップの色(平常時とホバー)。
`breadcrumb.current.fg` / `font-weight`	アクティブなステップの見た目。

カスタムプロパティ --hc-breadcrumb-separator はセパレータグリフの上書きフックです。値が型付きのデザイン値ではなく content 文字列であるため、トークンのエントリはありません。

CSS 変数

生成される CSS 変数を表示

--hc-breadcrumb-gap | -font-size | -separator-fg
--hc-breadcrumb-link-fg | -link-hover-fg
--hc-breadcrumb-current-fg | -current-font-weight
--hc-breadcrumb-separator   (override hook, no default token)
--hc-color-focus-ring       (inherited from data-color)