Lyra

Breadcrumb

Breadcrumb shows where the current page sits in the site. Supply the page trail, then decide whether the surrounding navigation needs a page-level location or FileManager's folder-level path bar.

Examples

Page location

The final item is always the current page, even if it has an href. Give every earlier item a real destination so the trail remains useful to people moving back through the site.

Partial data

A non-final item without href becomes an anchor to #. Treat that fallback as a data bug, not a harmless placeholder: it looks navigable but does not move someone to a useful page. This trail also carries its own aria-label, which is what keeps two breadcrumbs on one page from presenting assistive technology with two landmarks of the same name.

When to use

Use Breadcrumb for a page's position in a site hierarchy, especially when the current location has more than one meaningful parent.

Reach for something else when:

  • People are browsing folders inside FileManager — use FileManager's path and onNavigate; it models the current folder, not the page's place in the site.
  • People move between a few peer views — use Tabs.
  • The path has only one useful back destination — use a normal back link instead of a trail.

Accessibility

  • Renders a flat <nav> landmark, not an <ol> or <li> list. It is named "Breadcrumb" unless you pass your own aria-label — do pass one when a page holds more than one trail, or when the interface is localized and an English landmark name would be out of place.
  • Every item before the last is an anchor. The last is a <span class="lyra-breadcrumb__current" aria-current="page">, even when its data has an href.
  • Separators are empty, aria-hidden spans drawn in CSS. Do not add chevron text that a screen reader could announce between locations.
  • Supply concise, ordered labels that identify locations without relying on the visual hierarchy.

Props

NameTypeRequiredDescription
'aria-label'string—Accessible name for the navigation landmark. Default: `"Breadcrumb"`.
itemsBreadcrumbItem[]RequiredNavigation items; the final item is rendered as the current page.

Plain HTML

The separator span is intentionally empty: CSS draws its chevron, and assistive technology ignores it.

html
<nav class="lyra-breadcrumb" aria-label="Breadcrumb">
  <a href="/workspace">Workspace</a>
  <span class="lyra-breadcrumb__sep" aria-hidden="true"></span>
  <a href="/workspace/projects">Projects</a>
  <span class="lyra-breadcrumb__sep" aria-hidden="true"></span>
  <span class="lyra-breadcrumb__current" aria-current="page">Brand refresh</span>
</nav>