Holo Breadcrumb & Breadcrumb Item

<holo-breadcrumb> renders a nav landmark labelled “Breadcrumb” wrapping an ordered list. <holo-breadcrumb-item> children render as links, except the item marked current, which renders as non-interactive text with aria-current="page".

When to use

Use it for:

• Showing where the current page sits in a hierarchy of three or more levels.
• Giving users a one-click path back up the hierarchy.

Don’t use it for:

• Stepping through a flow or paging through results. Use Pagination.
• Primary site navigation. Use your own <nav> with Links.
• Switching views on the same page. Use Tabs.

Live Previews

Default

HomeProductsWidget

<holo-breadcrumb>
  <holo-breadcrumb-item href="/">Home</holo-breadcrumb-item>
  <holo-breadcrumb-item href="/products">Products</holo-breadcrumb-item>
  <holo-breadcrumb-item current>Widget</holo-breadcrumb-item>
</holo-breadcrumb>

Accessibility

<holo-breadcrumb> renders a <nav> named by label (default “Breadcrumb”) containing an <ol>. Each <holo-breadcrumb-item> renders an <li> with a native <a href>. When current is set it renders a <span aria-current="page"> instead of a link, so the current page is not a tab stop.

Key	Action
Tab	Moves between breadcrumb links
Enter	Follows the focused link

• Links use native <a> focus behaviour with a visible :focus-visible ring.

You provide:

• A real href on every item except the current one. An item without href is an anchor with no destination and is not keyboard focusable.
• current on exactly one item, the last.
• Link text that is meaningful out of context.
• A translated label for other languages, and a distinct one if a page has more than one breadcrumb.

---

API Reference

holo-breadcrumb

Importing

import '@philbob-sideprojects/hololink-ui/holo-breadcrumb';

Properties

Property	Attribute	Type	Default	Description
label	label	string	'Breadcrumb'	The accessible name of the navigation landmark.

Slots

Slot	Description
(default)	The holo-breadcrumb-item elements, in order from the root to the current page.

CSS custom properties

Property	Description
--holo-breadcrumb-gap	Space between breadcrumb items.

holo-breadcrumb-item

Importing

import '@philbob-sideprojects/hololink-ui/holo-breadcrumb-item';

Properties

Property	Attribute	Type	Default	Description
current	current	boolean	false	Marks this item as the current page. Renders as non-interactive text with aria-current="page" instead of a link.
href	href	string	—	The link destination. Omit for the current page item.

Slots

Slot	Description
(default)	The item's visible label text.

CSS custom properties

Property	Description
--holo-breadcrumb-current-color	Text color of the current page item.
--holo-breadcrumb-gap	Space between the separator and the item label.
--holo-breadcrumb-link-color	Text color of linked items.
--holo-breadcrumb-link-hover-color	Text color of linked items on hover.