k8ordo
  • UI
  • Form
  • State
  • Router
  • Static
  • Server
ダークモードに切り替え
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AI
ナビゲーションを開く
Buttons
  • Button
  • IconButton
Navigation
  • Anchor
  • Tabs
  • Breadcrumb
  • Pagination
Forms
  • TextField
  • Textarea
  • NumberField
  • Select
  • Checkbox
  • CheckboxCard
  • CheckboxGroup
  • Switch
  • PasswordInput
  • Radio
  • RadioCard
  • Autocomplete
  • Slider
  • FileField
  • FormControl
  • Form
Data Display
  • Accordion
  • Avatar
  • Badge
  • Card
  • Code
  • Table
  • Heading
Feedback
  • Alert
  • Skeleton
  • Spinner
  • Toast
  • Progress
Overlays
  • Dialog
  • Drawer
  • Modal
  • Popover
  • DropdownMenu
  • Tooltip
  • ListBox
Layout
  • Stack
  • Grid
  • Separator
  • ScrollLinked
Media
  • Icons
k8ordo

Baselineに入った機能を、制限なく使うReactのライブラリ群。

パッケージ
  • @k8ordo/ui
  • @k8ordo/form
  • @k8ordo/state
  • @k8ordo/router
  • @k8ordo/static
  • @k8ordo/server
UI
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AIチャット
  • Generative UI
  • AIエージェント
  • Storybook
リソース
  • GitHub
  • npm

© 2026 k8o — MIT License

組版 — Noto Sans JP / M PLUS 2

Components

Buttons
  • Button
  • IconButton
Navigation
  • Anchor
  • Tabs
  • Breadcrumb
  • Pagination
Forms
  • TextField
  • Textarea
  • NumberField
  • Select
  • Checkbox
  • CheckboxCard
  • CheckboxGroup
  • Switch
  • PasswordInput
  • Radio
  • RadioCard
  • Autocomplete
  • Slider
  • FileField
  • FormControl
  • Form
Data Display
  • Accordion
  • Avatar
  • Badge
  • Card
  • Code
  • Table
  • Heading
Feedback
  • Alert
  • Skeleton
  • Spinner
  • Toast
  • Progress
Overlays
  • Dialog
  • Drawer
  • Modal
  • Popover
  • DropdownMenu
  • Tooltip
  • ListBox
Layout
  • Stack
  • Grid
  • Separator
  • ScrollLinked
Media
  • Icons

Breadcrumb

ナビゲーションのパンくずリスト

Storybookで確認

インポート

使い方

縦書きプレビューに切り替え

現在のページ

縦書きプレビューに切り替え

サイズ

縦書きプレビューに切り替え

Props

Breadcrumb.List

children?
Type: ReactNode
Default: -
size?
Type: 'sm'|'md'|'lg'
Default: 'md'
PropTypeDefault
children?ReactNode-
size?'sm'|'md'|'lg''md'

Breadcrumb.Item

children?
Type: ReactNode
Default: -
PropTypeDefault
children?ReactNode-

Breadcrumb.Separator

  1. Home
  3. Components
  5. Breadcrumb
  1. Home
  3. Components
  5. Breadcrumb
  1. Home
  3. Docs
  1. Home
  3. Docs
  1. Home
  3. Docs
PropTypeDefault

Breadcrumb.Link

href
Type: T
Default: -
children?
Type: ReactNode
Default: -
current?
Type: boolean
Default: false
renderAnchor?
Type: (props: RenderBreadcrumbAnchorProps<T>) => ReactNode
Default: defaultRenderBreadcrumbAnchor
PropTypeDefault
hrefT-
children?ReactNode-
current?
boolean
false
renderAnchor?(props: RenderBreadcrumbAnchorProps<T>) => ReactNodedefaultRenderBreadcrumbAnchor
import { Breadcrumb } from '@k8ordo/ui';
<Breadcrumb.List>
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/components/breadcrumb">
      Breadcrumb
    </Breadcrumb.Link>
  </Breadcrumb.Item>
</Breadcrumb.List>
<Breadcrumb.List>
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
    <Breadcrumb.Link current href="/components/breadcrumb">
      Breadcrumb
    </Breadcrumb.Link>
  </Breadcrumb.Item>
</Breadcrumb.List>
<Breadcrumb.List size="sm">
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
    <Breadcrumb.Link current href="/docs">Docs</Breadcrumb.Link>
  </Breadcrumb.Item>
</Breadcrumb.List>

<Breadcrumb.List size="md">
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
    <Breadcrumb.Link current href="/docs">Docs</Breadcrumb.Link>
  </Breadcrumb.Item>
</Breadcrumb.List>

<Breadcrumb.List size="lg">
  <Breadcrumb.Item>
    <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
  </Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item>
    <Breadcrumb.Link current href="/docs">Docs</Breadcrumb.Link>
  </Breadcrumb.Item>
</Breadcrumb.List>