Breadcrumbs
The trail
presets="trail": chevrons, every crumb quiet, links turn primary on hover. This is what sits above every page title in the playground and in speedway.The topbar crumb
presets="topbar": a slash, the current page in full ink and semibold, the shape walmart's topbar names the page with. Never hidden when single.Pending and page-less crumbs
A name still loading draws a same-height skeleton; a segment with no page of its own (no href) reads as text and does not link anywhere broken.Derived from the path
deriveCrumbs walks a pathname against rules the app declares once: static labels, page-less segments, a dropped pair, and namers for dynamic values. Pick a path; the trail below is derived, not hand-written.Hidden when single
hideSingle (on by default, and in the trail preset): one crumb would only restate the page title, so nothing renders. The dashed frame below is empty on purpose; pass hideSingle={false} to keep it.Composite: above a PageTitle
The house page header: the trail, then the PageTitle, in a flex column with gap-2. ShowcaseTitle and the docs' DocTitle both build this.8 · Navigation and shell
Styling slots
Every className the component exposes, and what it reaches- className
- the nav wrapper
- separator
- chevron or slash between crumbs
- emphasizeCurrent
- the last crumb in full ink and semibold
- size
- xs (the trail) or sm
- linkAs
- the app's router link for crumbs with an href
- hideSingle
- render nothing when the trail is one crumb