Navigation

Breadcrumb

Breadcrumb navigation using a semantic nav and list.

stableCSS onlyBuilt on <nav>hydrateless/breadcrumb.css

Breadcrumb navigation using a semantic <nav> wrapping an ordered list. CSS-only, no enhancer required.

Breadcrumb

Live

1. Home
2. Docs
3. Components

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
href	string	Not set	Link target for an item.
current	boolean	false	Marks the current page with `aria-current`.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
--hl-fg-subtle	Separator and inactive link color.
--hl-primary	Hovered link color.

Accessibility

• Label the <nav> with aria-label="Breadcrumb".
• Mark the current page with aria-current="page" and render it as text, not a link.

Related

PaginationPage navigation with first/last and ellipsis truncation.MenuA menubar with nested submenus.