Navigation

Trail breadcrumbs

A horizontal breadcrumb trail with separators between each step, muted ancestor links, a bold current page, and an ellipsis that collapses long paths.

Using Trail breadcrumbs

A horizontal breadcrumb trail with separators between each step, muted ancestor links, a bold current page, and an ellipsis that collapses long paths.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: separator, maxVisible, accentColor

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

2111Auto-Hide Nav BarNavigationA sticky top bar that slides up out of view as the visitor scrolls down and slides back in as soon as they scroll up.

2309Bubble burst menuNavigationA floating logo pill and toggle that expand into a full screen overlay of oversized pill links, each bursting into place with a springy stagger.

2318Circle reveal sidebarNavigationA menu panel that opens as a circle growing out of its own toggle, with rows springing up in sequence and the toggle bars folding into a cross.

2123Collapsing trail breadcrumbNavigationA path trail with chevron separators whose middle steps collapse into an ellipsis button that opens a menu of the hidden steps.

2162Grouped magnify dockNavigationA bottom dock of round icon buttons split into two clusters that grow the closer the pointer gets to each one.

2366Hover slide nav labelsNavigationA vertical navigation list where hovering or focusing a label slides a duplicate copy up into view while the original slides out, so the label appears to refresh itself.