navigation
Breadcrumb
アクセシブルなパンくずナビゲーション。nav 要素の aria-label や aria-current="page" に対応。
インポート
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from '@stella-ds/react'BreadcrumbBreadcrumbListBreadcrumbItemBreadcrumbLinkBreadcrumbSeparator
Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
| asChild (BreadcrumbLink) | boolean | false | Render as child element (router Link, etc.) |
| isCurrentPage (BreadcrumbLink) | boolean | false | Marks current page — renders as span with aria-current |
Preview
使用例
Basic
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem><BreadcrumbLink isCurrentPage>Docs</BreadcrumbLink></BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>