KARAKURIDESIGN SYSTEM

Breadcrumb

Breadcrumbは、サイト内の現在位置を階層的に表示するナビゲーションコンポーネントです。 ユーザーが上位ページへ素早く戻れるようにします。

3
Sizes
6
Parts
Collapse
Auto Collapse
Pure
React

Playground

Preview
D
Size
Separator
Items
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Products</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Category</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Sizes

sm
フォント12px
アイコン14px
Gap6px
default
フォント13px
アイコン14px
Gap8px
lg
フォント14px
アイコン16px
Gap8px

Features

Auto Collapse

maxItemsで長いパスを自動省略。表示数はitemsBeforeCollapse / itemsAfterCollapseで制御。

Custom Separator

任意のReactNodeをセパレーターに。スラッシュ、ドットなど自由に変更可能。

Custom Link (asChild)

asChildでNext.js Linkなどカスタムリンクを合成。スタイルは自動継承。

API

Component Structure

Breadcrumb— Radix Slot
.List.Item.LinkProps.Page.Separator.Ellipsis

Props

Breadcrumb

separatorChevronRight icon
ReactNode

アイテム間のセパレーター要素

size"default"
"sm" | "default" | "lg"

Breadcrumbのサイズ

maxItemsundefined
number

折りたたみ前の最大アイテム数

itemsBeforeCollapseundefined
number

省略記号の前に表示するアイテム数

itemsAfterCollapseundefined
number

省略記号の後に表示するアイテム数

BreadcrumbLink

asChildfalse
boolean

カスタムリンクコンポーネントとの合成（Radix Slot）

hrefundefined
string

リンク先のURL