Murasaki
コンポーネント

Breadcrumb

階層内で現在のページがどこにあるかを示します。

使い方

import {
  Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList,
  BreadcrumbPage, BreadcrumbSeparator,
} from '@murasakijs/ui'

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem><BreadcrumbLink href="/">ホーム</BreadcrumbLink></BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem><BreadcrumbPage>設定</BreadcrumbPage></BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Breadcrumb は「breadcrumb」というアクセシブル名を持つ nav を生成します。現在のページだけに BreadcrumbPage を使ってください。aria-current="page" が自動で付きます。ルーターの Link をそのまま描画要素にする場合は BreadcrumbLinkasChild を使えます。途中の階層を省略するときは BreadcrumbEllipsis と、隠したリンクへ移動できるメニューを組み合わせてください。

エクスポート

BreadcrumbBreadcrumbListBreadcrumbItemBreadcrumbLinkBreadcrumbPageBreadcrumbSeparatorBreadcrumbEllipsis

GitHub でこのページを改善

On this page