Breadcrumb

Navigation trail primitives for page hierarchy.

Quick Preview

Composition

Use this public composition when building Breadcrumb:

Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   ├── BreadcrumbLink
    │   └── BreadcrumbPage
    └── BreadcrumbSeparator

Usage

<Breadcrumb><BreadcrumbList><BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem><BreadcrumbSeparator /><BreadcrumbItem><BreadcrumbPage>Applications</BreadcrumbPage></BreadcrumbItem></BreadcrumbList></Breadcrumb>

Examples

Default Breadcrumb

Use this as the starting point for Breadcrumb. Keep product data, routing, fetching, and authorization logic in the consuming app.

Props

Prop/APITypeDefaultDescription
render on BreadcrumbLinkBase UI render prop-Changes rendered link element while preserving styles.
children on BreadcrumbSeparatorReactNodechevron iconCustom separator glyph.
classNamestring-Local layout or spacing overrides.
native/root propsReact component props-Passed through to the underlying root or primitive.

Accessibility

  • Preserve the documented Breadcrumb composition so labels, triggers, content, and controls remain connected.
  • Provide visible labels or accessible names for interactive controls.
  • Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
  • Do not communicate state with color alone; include text, icons, or helper copy.

Tooltip

Hover or focus disclosure for short helper text, plus Infotip for standalone info triggers.

MobileSidebar

Standalone mobile site navigation sheet for pages with or without a top navbar.

On this page

Quick PreviewCompositionUsageExamplesDefault BreadcrumbPropsAccessibility