k8ordo
  • UI
  • Form
  • State
  • Router
  • Static
  • Server
Switch to dark mode
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AI
Open navigation
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

React libraries that use Baseline features without holding back.

Packages
  • @k8ordo/ui
  • @k8ordo/form
  • @k8ordo/state
  • @k8ordo/router
  • @k8ordo/static
  • @k8ordo/server
UI
  • Get Started
  • Theming
  • i18n
  • Components
  • Hooks
  • Helpers
  • AI Chat
  • Generative UI
  • AI Agents
  • Storybook
Resources
  • GitHub
  • npm

© 2026 k8o — MIT License

Typeset in 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

A breadcrumb navigation component.

View in Storybook

Import

Usage

  1. Home
  3. Components
  5. Breadcrumb

Current Page

  1. Home
  3. Components
  5. Breadcrumb

Sizes

  1. Home
  3. Docs
  1. Home
  3. Docs
  1. Home
  3. Docs

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

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>