Breadcrumb

Navigation breadcrumb trail with overflow collapsing. Supports icons, custom separators, and click or href navigation per item.

import { Breadcrumb } from 'phoundry-ui';

Basic

Show code

<Breadcrumb
  items={[
    { id: 'home', label: 'Home' },
    { id: 'docs', label: 'Docs' },
    { id: 'breadcrumb', label: 'Breadcrumb' },
  ]}
  onnavigate={(item) => goto(item.id)}
/>

With Icons

Show code

import { Breadcrumb, PhiIcons } from 'phoundry-ui';

<Breadcrumb
  items={[
    { id: 'home', label: 'Home', icon: PhiIcons.folder },
    { id: 'projects', label: 'Projects', icon: PhiIcons.document },
    { id: 'phoundry-ui', label: 'Phoundry UI', icon: PhiIcons.edit },
    { id: 'components', label: 'Components' },
  ]}
  onnavigate={(item) => goto(item.id)}
/>

Collapsed Overflow (maxVisible=3)

7 items, showing first + last 2 with an overflow menu for the rest.

Show code

<Breadcrumb
  items={longItems}
  maxVisible={3}
  onnavigate={(item) => goto(item.id)}
/>

Separator + larger size

Use separator for brand-specific glyphs; size="md" bumps text and icon metrics.

Show code

<Breadcrumb items={items} separator="›" />

Links vs buttons

Segments with href render as real links for middle crumbs; the last segment stays plain text. Use onnavigate when you route with a SPA helper instead.

Show code

<Breadcrumb
  items={[
    { id: 'home', label: 'Home', href: '/app' },
    { id: 'docs', label: 'Docs', href: '/app/docs' },
    { id: 'here', label: 'This page' },
  ]}
/>

Props

Prop	Type	Default	Description
items required	BreadcrumbItem[]	—	Breadcrumb segments in order.
onnavigate	(item: BreadcrumbItem) => void	—	Called when a breadcrumb is clicked.
separator	string	'/'	Separator character between items.
maxVisible	number	—	Max segments to show before collapsing middle items into a dropdown.
size	'sm' \| 'md'	'sm'	Text and icon size.
class	string	—	Additional CSS classes.

BreadcrumbItem

Prop	Type	Default	Description
id required	string	—	Unique identifier.
label required	string	—	Display text.
icon	string	—	Iconify icon string.
href	string	—	Renders as a link instead of a button.

Usage tips

The last item renders as plain text (non-clickable) to indicate the current page.
Use maxVisible to keep the breadcrumb compact — middle items collapse into a ”…” dropdown.
Items with href render as <a> tags; otherwise they render as buttons that call onnavigate.
Set separator to "›" or ">" for alternative visual styles.
The overflow menu relies on --z-dropdown from components.css; define it if you override the theme stack.