HyBreadcrumb

Usage examples on this page are written for Lit / plain HTML (<hy-breadcrumb>). The same component ships as HyBreadcrumb in @whitespaceux/harmony-react (native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.

A navigation component that displays a hierarchical breadcrumb trail. Helps users understand their location within a site and navigate back to parent pages.

Key Features

• Semantic HTML structure (nav > ol > li) for accessibility
• Customizable separator via prop (passed to children via CSS custom property)
• Size variants (small, medium, large)
• Last item separator hidden via [last] attribute (set by parent)
• Full WAI-ARIA breadcrumb pattern compliance

Accessibility Features

• Navigation landmark with aria-label
• Ordered list structure for hierarchy
• Separators hidden from screen readers (aria-hidden)
• Current page marked with aria-current="page"
• Standard keyboard navigation (Tab between links)

Browser Compatibility

• Modern browsers (Chrome, Firefox, Safari, Edge)
• Full SSR compatibility (no hydration mismatches)

SSR Implementation

• Separator text is set as CSS custom property --hy-breadcrumb-separator-content on the host
• The host CSS variable is inherited by slotted breadcrumb-item children
• Last item is marked with [last] attribute after hydration (handles wrapper-per-item patterns that break CSS :last-of-type)
• Default separator (/) is defined in CSS for SSR before hydration

Examples

Basic usage

<hy-breadcrumb>
  <hy-breadcrumb-item href="/">Home</hy-breadcrumb-item>
  <hy-breadcrumb-item href="/products">Products</hy-breadcrumb-item>
  <hy-breadcrumb-item current>Shoes</hy-breadcrumb-item>
</hy-breadcrumb>

With custom separator

<hy-breadcrumb separator="›">
  <hy-breadcrumb-item href="/">Home</hy-breadcrumb-item>
  <hy-breadcrumb-item href="/docs">Documentation</hy-breadcrumb-item>
  <hy-breadcrumb-item current>Components</hy-breadcrumb-item>
</hy-breadcrumb>

With icon separator (per-item slot)

<hy-breadcrumb>
  <hy-breadcrumb-item href="/">
    Home
    <hy-icon slot="separator" name="chevron-right"></hy-icon>
  </hy-breadcrumb-item>
  <hy-breadcrumb-item href="/settings">
    Settings
    <hy-icon slot="separator" name="chevron-right"></hy-icon>
  </hy-breadcrumb-item>
  <hy-breadcrumb-item current>Profile</hy-breadcrumb-item>
</hy-breadcrumb>

Different sizes

<hy-breadcrumb size="small">...</hy-breadcrumb>
<hy-breadcrumb size="medium">...</hy-breadcrumb>
<hy-breadcrumb size="large">...</hy-breadcrumb>

With home icon

<hy-breadcrumb>
  <hy-breadcrumb-item href="/">
    <hy-icon name="home" slot="prefix"></hy-icon>
    <span class="sr-only">Home</span>
  </hy-breadcrumb-item>
  <hy-breadcrumb-item href="/products">Products</hy-breadcrumb-item>
  <hy-breadcrumb-item current>Electronics</hy-breadcrumb-item>
</hy-breadcrumb>

API

Properties

Property	Attribute	Type	Default	Description
separator	separator	string	'/'	The separator displayed between breadcrumb items. Can be any string (e.g., "/", "›", "→"). Set as CSS custom property on the host for inheritance by children. For icon separators, use the separator slot on individual items instead.
label	label	string	'Breadcrumb'	Accessible label for the navigation landmark. Announced by screen readers to identify this as breadcrumb navigation.
size	size	'small' | 'medium' | 'large'	'medium'	Size variant affecting font size and spacing. - small: Compact breadcrumbs for dense layouts - medium: Default size for most use cases - large: Larger breadcrumbs for prominent navigation

Slots

Slot	Description
default	Breadcrumb items (hy-breadcrumb-item elements)

CSS Parts

Part	Description
base	The nav element
list	The ordered list (ol) element

CSS Custom Properties

Property	Description
--hy-breadcrumb-gap	Gap between breadcrumb items
--hy-breadcrumb-gap-print	Gap between breadcrumb items in print
--hy-breadcrumb-font-family	Font family override for breadcrumb text