HyBreadcrumbItem

An individual breadcrumb item that represents a single level in a navigation hierarchy. Designed to work within an hy-breadcrumb container for proper accessibility and styling.

Key Features

• Renders as link (<a>) when href is provided, span when current page
• Supports disabled state with proper ARIA attributes
• Prefix slot for icons (commonly home icon)
• Separator customization via slot or inherited from parent via CSS custom property
• Full keyboard navigation support

Accessibility Features

• role="listitem" on the host element for list semantics
• aria-current="page" when marked as current
• aria-disabled for disabled items (only when true)
• Proper link semantics with keyboard activation
• Separator hidden from screen readers

SSR Compatibility

• The role="listitem" attribute is reflected and included in SSR output
• Separator text is inherited via CSS custom property --hy-breadcrumb-separator-content
• Last item's separator is hidden via the [last] attribute the parent hy-breadcrumb sets (CSS :last-of-type can't be used — items are wrapped)
• No hydration mismatches when used within hy-breadcrumb

Examples

Basic usage within breadcrumb

<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 icon prefix

<hy-breadcrumb-item href="/">
  <hy-icon name="home" slot="prefix"></hy-icon>
  Home
</hy-breadcrumb-item>

Disabled item

<hy-breadcrumb-item href="/locked" disabled> Locked Section </hy-breadcrumb-item>

External link

<hy-breadcrumb-item href="https://example.com" target="_blank">
  External
  <hy-icon name="external-link" slot="suffix"></hy-icon>
</hy-breadcrumb-item>

Events

• activate - Fired when the item is clicked. Detail: { href: string, originalEvent: MouseEvent | KeyboardEvent }

Slots

• default - The breadcrumb item text content
• prefix - Content to display before the label (icons)
• separator - Custom separator (overrides parent separator)

Methods

focus()

Sets focus on the breadcrumb item link.

Parameters:

• options - Optional focus options

blur()

Removes focus from the breadcrumb item.