HyBreadcrumb

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>

Slots

• default - Breadcrumb items (hy-breadcrumb-item elements)

Methods

updated()

Updates the CSS custom property on the host element when separator changes. This is necessary because slotted content inherits CSS from the light DOM, not from elements inside the shadow DOM.

firstUpdated()

Sets the initial separator CSS variable and marks the last item.