Navigation v1.0.0

Breadcrumbs

Navigation trail showing page hierarchy. Supports separator customization, collapsible middle items on overflow, and link/text items. The collapse feature hides intermediate crumbs behind a "..." ellipsis button that expands on click, keeping long paths scannable without cluttering the UI.

Preview & Code

Options

Name Type Default Description
items * Array required Array of hashes with `label:` (String, required) and `href:` (String, optional — nil = current page, rendered as plain text)
separator Symbol :chevron Separator icon between crumbs: :chevron, :slash, :arrow, or :dot
collapse_after Integer nil When set and item count exceeds this number + 1, middle items collapse behind a '...' ellipsis button that expands on click

Changelog v1.0.0

- Initial release with chevron, slash, arrow, and dot separators
- Collapsible overflow with Stimulus-powered expand on click
- Accessible nav/ol markup with aria-label and aria-current
- Dark mode support throughout

Get Full Access

Unlock the source code for this component and all others. One-time payment for lifetime access.

Get Access Now