本文へスキップ

ドキュメント

パンくずリスト

ウェブサイト内でのユーザーの位置を示すパンくずリストを作成します。

使用方法

パンくずリストコンポーネントは、横に並べられ、区切り記号で区切られたリンクで構成されています。コンポーネントを定義するには、<ul>要素に.uk-breadcrumbクラスを追加します。リスト内にパンくずリスト項目として<a>要素を使用します。アクティブ状態は、最後の<li>要素に自動的に適用されます。

リンクのないリスト項目を追加するには、<a>の代わりに<span>要素を使用します。または、<li>要素に.uk-disabledクラスを追加し、アンカーからhref属性を削除して、キーボードナビゲーションからアクセスできないようにすることで、<a>要素を無効にします。

<ul class="uk-breadcrumb">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><span></span></li>
</ul>
  • <nav aria-label="Breadcrumb">
    <ul class="uk-breadcrumb">
        <li><a href="#">Home</a></li>
        <li><a href="#">Linked Category</a></li>
        <li class="uk-disabled"><a>Disabled Category</a></li>
        <li><span aria-current="page">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span></li>
    </ul>
</nav>

アクセシビリティ

パンくずリストコンポーネントがパンくずリストデザインパターンに準拠するには、適切なWAI-ARIAロール、状態、プロパティを設定します。

<nav aria-label="Breadcrumb">
    <ul class="uk-breadcrumb">…</ul>
</nav>