This page features interactive demos and side-by-side code samples that need at least 340 pixels of horizontal space. Please widen your browser window, or rotate your device, to continue.
Component <neo-breadcrumb> is a horizontal trail of links ending in the current page. A ResizeObserver watches the host width and switches between the full trail, middle items collapsed into a popover, and just menu + last when even that doesn't fit.
Default
Deep trail
Deep trail, compact labels
Slash separator
Dot separator
Icon separator (sparkles)
Chip wrappers
DeactivateRenameDuplicateDelete
The preview routes through the in-browser server simulator. Its current Settings (network latency, a non-200 response, or an unreachable server) are in effect. The live preview can look like it is misbehaving. Adjust them in the Settings panel.
The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.
Signals
Datastar signals declared in the selected state's markup. Change a value to update the preview, applied live while Sync is on, or when you click Patch.
Forwarded to the overflow <neo-popover> when middle items collapse into a menu; see its placement values.
screen-offset
string observed
none
Forwarded to the overflow <neo-popover>; controls the viewport edge margin and scrollable max size.
follow-scroll
"always" | "until-trigger-invisible" observed
unset
Forwarded to the overflow <neo-popover>. When absent, close on outside scroll. Set to always to stay anchored during scroll. Set to until-trigger-invisible to close once the trigger leaves the viewport.
clamp-placement
boolean observed
false
Forwarded to the overflow <neo-popover>; re-anchor the menu so it stays inside the viewport when content would overflow.
min-fit-height
CSS length | "content" observed
"content"
Forwarded to the overflow <neo-popover>; minimum vertical slot before the menu auto-flips to the opposite side.
min-fit-width
CSS length | "content" observed
"content"
Forwarded to the overflow <neo-popover>; same as min-fit-height but for the horizontal axis.
min-open-height
CSS length observed
2rem
Forwarded to the overflow <neo-popover>; close when the bounded vertical slot is too small to be useful. Use 0 to disable.
min-open-width
CSS length observed
2rem
Forwarded to the overflow <neo-popover>; same as min-open-height but for horizontal space. Use 0 to disable.
Fires when the trail adapts to its container, only on a real visible/collapsed change, not on every resize. shown and hidden are the ids of the items still in the trail vs. moved into the overflow menu; items without an id are omitted.
A deeper trail that exercises every render mode. The frame opens at a width that already forces the middle items into the ... menu, with the tail kept visible. Drag the frame wider to recover the full trail, or narrower to collapse to menu + last.
The same stress case with compact single-letter crumbs. This keeps many more items visible before collapsing, which is useful for checking that the separator logic still behaves when labels are tiny.