Breadcrumb

Breadcrumbs use the semantic <nav> element with aria-label="Breadcrumb" and an ordered list (<ol>) to represent the hierarchical structure. The current page is marked with aria-current="page" and rendered as a <span> rather than a link.

Key features:

• Semantic HTML with <nav> and <ol> for proper structure
• Current page indicated with aria-current="page"
• CSS-generated separators (no extra markup needed)
• Multiple separator styles: slash, chevron, arrow, dot, pipe
• Collapsed mode for deep hierarchies
• Text truncation for long labels

A basic breadcrumb showing the page hierarchy. Uses the default slash separator. The current page is not a link to avoid self-referential navigation.

Replace the "Home" text with an icon for a more compact design. Include visually-hidden text for screen reader accessibility.

When the breadcrumb trail is long, use data-collapsed to hide middle items. This shows only the first item, an ellipsis indicator, and the last two items.

Use data-separator to change the separator character. Available options: chevron, arrow, dot, pipe.

For breadcrumb items with long labels, use data-truncated to limit width and show ellipsis.

The breadcrumb styles are included in Vanilla Breeze. Here is the CSS for reference:

• Landmark: Always use <nav> with aria-label="Breadcrumb" to identify the navigation purpose
• Ordered list: Use <ol> to convey hierarchical order to screen readers
• Current page: Mark with aria-current="page" and use a <span> instead of a link
• Depth limit: Avoid more than 5 levels; use collapsed mode for deep hierarchies
• Mobile: Consider horizontal scrolling or collapsing on small screens
• Schema.org: Add structured data for SEO benefits (see nav element docs)