Breadcrumb
階層をたどって、上の階層へ戻ります。
使いどころ
- 階層の深い画面で、上位の階層をたどって戻れるようにする時に使います。
- 作業面の上端で現在地と操作を一緒に置く時は
ContextBar、一つ上へ戻るだけならBackLinkを使います。
使い方
itemsに上位から現在地までを順に渡します。hrefを持つ項目は、青緑の文字に1pxの下線を引いたリンクになり、ホバーすると赤にします。hrefの無い途中の項目は灰色の文字です。最後の項目は現在地として黒い通常の太さの文字で出し、hrefを渡してもリンクにしません。文字は12pxです。
項目の間には淡い灰色の「›」を置きます。狭い場所では項目の間で折り返し、長い名前は途中でも折り返します。
単独でも、ContextBarの現在地としても使えます。
アクセシビリティ
- ルートは
labelを読み上げ名に持つnavで、項目をolの順に並べます。 - 最後の項目に
aria-current="page"を付けます。
API
Breadcrumb
| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
label | string | "現在の位置" | navの読み上げ名。 |
items必須 | readonly BreadcrumbItem[] | 上位から現在地までの階層。最後の項目を現在地としてaria-current="page"を付ける。 |
読み込むCSS：layers.css、reset.css、tokens.css、base.css、layout.css、components/breadcrumb.css
BreadcrumbItem
| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
label必須 | string | 階層の名前。 | |
href | string | 戻り先のURL。最後の項目（現在地）では渡してもリンクにしない。省略するとリンクのない文字になる。 |
コード
HTML
HTML
<nav class="rx-breadcrumb" aria-label="現在の位置">
<ol>
<li><a href="/">道具箱</a></li>
<li><a href="/apps/search">記事</a></li>
<li><span aria-current="page">編集</span></li>
</ol>
</nav>
Hono JSX
Hono JSX
import { Breadcrumb } from "@tknf/retrix/hono";
export default () => (
<Breadcrumb
items={[
{ label: "道具箱", href: "/" },
{ label: "記事", href: "/apps/search" },
{ label: "編集" },
]}
/>
);