Breadcrumb
パンくずリストコンポーネント。
インポート
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage } from '@caroainc/ui-components'基本的な使い方
Loading...
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">ホーム</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/products">商品</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>商品詳細</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>アイコン付きホーム
Loading...
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/" className="flex items-center gap-1">
<Icon name="Home" size="sm" />
ホーム
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/settings">設定</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>プロフィール</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>長いパス
Loading...
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/">ホーム</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/category">カテゴリ</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="/category/sub">サブカテゴリ</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>商品詳細</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>Props (BreadcrumbLink)
| Prop | Type | Default | Description |
|---|---|---|---|
href* | string | - | リンク先URL |
asChild | boolean | false | 子要素をリンクとしてレンダリング |