HyBreadcrumbItem

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

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>

API

Properties

Property	Attribute	Type	Default	Description
href	href	string	''	The URL to navigate to when clicked. Omit for current page (renders as span).
target	target	'_blank' | '_parent' | '_self' | '_top'	—	Where to open the link. Only applies when href is provided.
current	current	boolean	false	Marks this item as the current page. Adds aria-current="page" and renders as non-interactive.
disabled	disabled	boolean	false	Disables the breadcrumb item, preventing interaction.
separator	separator	string	'/'	The separator to display after this item when used standalone. When inside hy-breadcrumb, the separator is inherited via CSS custom property.

Events

Event	Detail	Description
activate	—	Fired when the item is clicked. Detail: { href: string, originalEvent: MouseEvent | KeyboardEvent }

Slots

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

CSS Parts

Part	Description
link	The anchor element (when href provided)
current	The span element (when current)
prefix	The prefix slot wrapper
label	The text label wrapper
separator	The separator element

CSS Custom Properties

Property	Description
--hy-breadcrumb-item-gap	Gap between icon and label
--hy-breadcrumb-item-focus-radius	Focus ring border radius
--hy-breadcrumb-item-opacity-disabled	Opacity when disabled
--hy-breadcrumb-item-text-transform	Text transform for breadcrumb item
--hy-breadcrumb-item-underline-offset	Text underline offset
--hy-breadcrumb-item-hover-duration	Transition duration for hover and focus state feedback
--hy-breadcrumb-item-hover-easing	Transition easing for hover and focus state feedback

Methods

focus()

Sets focus on the breadcrumb item link.

Parameters:

• options - Optional focus options

blur()

Removes focus from the breadcrumb item.