Breadcrumb

<zeno-breadcrumb>NavigationSource

The path from the top of the site to the current page.

import '@usezeno/tokens/css';
import '@usezeno/core/web-components';

Examples

Basic

The trail is set as the items property. The last item is the current page and is not a link.

<zeno-breadcrumb></zeno-breadcrumb>

document.querySelector('zeno-breadcrumb').items = [
  { label: 'Home', href: '#home' },
  { label: 'Projects', href: '#projects' },
  { label: 'Annual report', href: '#annual-report' },
  { label: 'Budget' },
];

Text separator

Any text other than / is shown as it is between the items.

<zeno-breadcrumb separator="·"></zeno-breadcrumb>
<zeno-breadcrumb separator="-"></zeno-breadcrumb>

document.querySelectorAll('zeno-breadcrumb').forEach(breadcrumb => {
  breadcrumb.items = [
    { label: 'Settings', href: '#settings' },
    { label: 'Team', href: '#team' },
    { label: 'Members' },
  ];
});

Icons

With show-icons, an item that names an icon shows it before its label.

<zeno-breadcrumb show-icons></zeno-breadcrumb>

document.querySelector('zeno-breadcrumb').items = [
  { label: 'Home', href: '#home', icon: 'home' },
  { label: 'Account', href: '#account', icon: 'user' },
  { label: 'Settings', icon: 'settings' },
];

Listening for clicks

item-click fires when a link is used. The event does not bubble, so listen on the element itself.

No item clicked yet.

<zeno-breadcrumb></zeno-breadcrumb>
<p data-result>No item clicked yet.</p>

const breadcrumb = document.querySelector('zeno-breadcrumb');
breadcrumb.items = [
  { label: 'Files', href: '#files' },
  { label: 'Reports', href: '#reports' },
  { label: 'report.pdf' },
];
breadcrumb.addEventListener('item-click', event => {
  document.querySelector('[data-result]').textContent = 'Clicked: ' + event.detail.item.label;
});

Attributes and properties

Property	Attribute	Type	Default	Description
items	items	BreadcrumbItem[]	[]
separator	separator	string	'/'
showIcons	show-iconsreflects	boolean	false
maxItems	max-items	number	–
testId	–	string	–	Test ID for automated testing From ZenoElement.

Methods

Method	Description
focus(): void	Focus the component or its first focusable element From ZenoElement.
blur(): void	Blur the component or its focused element From ZenoElement.

Events

Event	Detail	Description
item-click	{ item: BreadcrumbItem }	A breadcrumb was activated.
collapsed-click	{ items: BreadcrumbItem[] }	The collapsed marker was activated; detail.items are the hidden breadcrumbs.

Slots

This element has no slots.

CSS parts

Part
base
collapsed
icon
item
label
link
list
separator
text

CSS custom properties

This element documents no custom properties of its own. Style it through its parts and through the tokens it reads.

The element's own source reads no tokens.

Types

interface BreadcrumbItem {
  label: string;
  href?: string;
  icon?: string;
  target?: string;
  rel?: string;
  disabled?: boolean;
}

Accessibility

Keyboard

Key	What it does
Tab	Moves focus from link to link.
Enter	Follows the focused link.
EnterSpace	On the “more” button that max-items adds, fires collapsed-click.

Forms

This element is not a form control. It adds nothing to a form's data.

Notes

• Renders a <nav> that holds an ordered list. The name of the <nav> is the aria-label you set, or “Breadcrumb navigation”.
• An item with href is a native link, unless it is the last one. The last item is plain text with aria-current="page".
• Separators and icons are hidden from assistive technology.
• The “more” button is a native <button> with the label “Show more breadcrumb items”.

Tests and known gaps

• No tests of its own. The only check is that the element registers and renders (smoke.test.ts).
• Not checked with axe-core.
• Has no Storybook story.

13 of the 18 properties, methods, events, slots and parts above have no description in the source

• the property items
• the property separator
• the property showIcons
• the property maxItems
• the part base
• the part collapsed
• the part icon
• the part item
• the part label
• the part link
• the part list
• the part separator
• the part text

Known gaps:

• The “more” button that max-items adds is empty. It asks for the icon more-horizontal, which zeno-icon does not register, so the button has a label but nothing to see.
• The “more” button does not show the hidden items. It only fires collapsed-click with them, and the page has to do the rest.
• max-items is only a limit that turns collapsing on. Above it, the trail always shows just the first and the last item, whatever the number is.
• The default separator / is drawn as a chevron. A real slash cannot be shown.
• A disabled item is still a link in the tab order. It has no aria-disabled, so a screen reader announces a normal link that does nothing.
• The current-page style is applied only when the last item has no href. With an href, the last item is still plain text but looks like the other items.
• The texts “Breadcrumb navigation” and “Show more breadcrumb items” are English. The first can be replaced with aria-label, the second cannot be changed.
• Items can only be given as data, in the items property or as JSON in the items attribute. Links written as children of the element are ignored.