7onicDESIGN SYSTEM

Breadcrumb

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

3
Sizes
6
Parts
Collapse
Auto Collapse
Pure
React

Playground

Preview
D
Size
Separator
Items
<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Link href="#">Products</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page>Category</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Sizes

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

Features

Auto Collapse

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

<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Ellipsis />
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page>Current Page</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Custom Separator

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

<Breadcrumb separator={<span className="text-text-subtle">/</span>}>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="#">Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Link href="#">Products</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page>Detail</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Custom Link (asChild)

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

import Link from 'next/link'

<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link asChild>
        <Link href="/home">Home</Link>
      </Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Link asChild>
        <Link href="/products">Products</Link>
      </Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page>Detail</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

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

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

Breadcrumb.Link

asChildfalse
boolean

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

hrefundefined
string

リンク先のURL

Anatomy

1
2
3
4
Home
6
/
Components
/
5
Breadcrumb
Fonttext-sm
Gapgap-2
Iconicon-xs
1
Root
navコンテナ
2
List
olリスト
3
Item
各パンくず項目
4
Link
クリック可能リンク
5
Current
現在ページ
6
Separator
区切り文字

Best Practices

✓

推奨

  • ✓サイトの階層構造を正確に反映する
  • ✓現在のページを最後のアイテムとして表示する
  • ✓長いパスにはcollapseを使って省略する
  • ✓ページ上部の目立つ位置に配置する
✕

避けるべき

  • ✗現在のページをリンクにしない（Breadcrumb.Pageを使用）
  • ✗サイト階層と無関係なアイテムを含めない
  • ✗1階層だけのBreadcrumbは使わない（意味がない）
  • ✗メインナビゲーションの代わりとして使用しない

Accessibility

セマンティック構造

Breadcrumbは<nav>要素で囲まれ、内部は<ol>で順序付きリストとして構造化されます。スクリーンリーダーがナビゲーションの階層を正しく読み上げます。

ARIA / WCAG

  • aria-label="breadcrumb" nav要素に設定
  • aria-current="page" 現在のページに設定
  • aria-hidden="true" セパレーターに設定
  • WAI-ARIA Breadcrumb Pattern準拠