Lyra DS

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 or asChild becomes plain text, avoiding a misleading # link. 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" by default; pass aria-label to translate or rename it. Pass aria-label when a page holds more than one trail.
Every item before the last with href or asChild is a link; missing destinations are plain text. 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.

Router links

tsx

// React Router
<Breadcrumb items={[{ label: 'Projects', asChild: <Link to="/projects" /> },
  { label: 'Current project' }]} />

// Next.js
<Breadcrumb items={[{ label: 'Projects', asChild: <Link href="/projects" /> },
  { label: 'Current project' }]} />

The final item remains text even when it has href or asChild. Native ancestors can use target: '_blank' and rel: 'noopener noreferrer' to open a new tab.

API and code

Name	Type	Required	Description
`'aria-label'`	`string`	—	Accessible name for the navigation landmark. Default: `"Breadcrumb"`.
`items`	`BreadcrumbItem[]`	Required	Navigation items; the final item is rendered as the current page.

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>

<lyra:breadcrumb> Generated from lyra-ds/blade v0.10.0.

Prop	Default	Required	Example values
`items`	—	Required	—

blade

<lyra:breadcrumb :items="[
    ['label' => 'Workspace', 'href' => '/workspace'],
    ['label' => 'Projects', 'href' => '/workspace/projects'],
    ['label' => 'Website redesign'],
]" />