Stepwise UI

Breadcrumbs

A navigation trail that collapses its middle into a menu once the path gets deep. The last item is always the current page (non-link). Choose between a slash or chevron separator.

Installation

npx stepwise-ui add breadcrumbs

Slash separator

Click any crumb to walk back up the trail
import { Breadcrumbs } from '@/components/stepwise/breadcrumbs'

// `onNavigate` intercepts the click and prevents the href navigation -
// drive the trail from state (or your router) instead of a page load.
<Breadcrumbs
  items={trail}
  onNavigate={(item, i) => setDepth(i + 1)}
/>

Chevron separator

<Breadcrumbs
  separator="chevron"
  items={[
    { label: 'Dashboard', href: '#' },
    { label: 'Settings',  href: '#' },
    { label: 'Profile' },
  ]}
/>

Overflow

Past maxItems the middle collapses to a … that opens a menu of the hidden crumbs - picking one jumps straight there, the row itself never expands. The head and the current page always survive.
7 crumbs, collapsed to 4 - pick a hidden crumb from the … to jump straight there
// Past `maxItems` the middle collapses to a "…" menu
<Breadcrumbs
  maxItems={4}      // default
  itemsBefore={1}   // crumbs kept at the head
  itemsAfter={2}    // crumbs kept at the tail
  items={[
    { label: 'Home',        href: '#' },
    { label: 'Workspace',   href: '#' },
    { label: 'Projects',    href: '#' },
    { label: 'Stepwise UI', href: '#' },
    { label: 'Components',  href: '#' },
    { label: 'Navigation',  href: '#' },
    { label: 'Breadcrumbs' },
  ]}
/>

Props

PropTypeDescription
items
BreadcrumbItem[]
Ordered path items. Last item is the current page.
separator
"slash" | "chevron"
Separator style. Default "slash".
maxItems
number
Collapse the middle past this many crumbs. 0 never collapses. Default 4.
itemsBefore
number
Crumbs kept at the head when collapsed. Default 1.
itemsAfter
number
Crumbs kept at the tail when collapsed. Default 2.
onNavigate
(item, index) => void
Called on crumb click; prevents the default href navigation.

BreadcrumbItem

PropTypeDescription
label
string
Visible text.
href
string
Link target. Omit on the last (current) item.