Breadcrumb

Navigation aid showing the current page's location in a hierarchy with customizable separators and sizes.

Size

Loading syntax highlighting...

01 Examples

Deep Hierarchy

Handles long paths gracefully with wrapping. Demo items use `href='#'` + `onclick: preventDefault` to keep the docs scroll position — real consumers omit the `onclick`.

Loading syntax highlighting...

With Icon Home

Replace the first label with an icon for compact navigation.

Loading syntax highlighting...

Page Header Context

Breadcrumb paired with a page title — a common real-world pattern.

Settings

Beta

Manage your project configuration and preferences.

Loading syntax highlighting...

02 Customization

Pill Links

Use slotClasses to turn breadcrumb links into subtle pill buttons.

Loading syntax highlighting...

Glassmorphism

Frosted glass breadcrumb over a rich gradient background.

Loading syntax highlighting...

Terminal Path

Monospace terminal-style breadcrumb for developer tools.

Loading syntax highlighting...

Fully Custom (unstyled)

Drop all defaults for a bordered, uppercase navigation.

Loading syntax highlighting...

03 Accessibility

Built-in ARIA

Renders as a <nav> with aria-label="Breadcrumb" (customizable via prop). The last item carries aria-current="page" to announce the current page. Individual items support aria-label for accessible name overrides (e.g. icon-only items).

Keyboard

All breadcrumb links are standard <a> elements, fully focusable via Tab. Focus indicators use focus-visible: to only show on keyboard navigation.

Semantic Markup

Uses an ordered list (<ol>) inside the <nav> landmark, following the WAI-ARIA Breadcrumb pattern. Separators are marked aria-hidden="true" to avoid screen reader clutter.

Reduced Motion

Hover transitions on links respect prefers-reduced-motion via the design-token-based transition duration.

04 API Reference

10 props

10 props 1 required

No matching properties

No matching properties

05 Installation

Import

Loading syntax highlighting...

llm.txt