Navigation
Breadcrumb
Shows where the current page sits in the hierarchy, with links back to each parent. The last item reads as the current page.
- Source
- src/components/ui/breadcrumb.tsx
- Figma
- Breadcrumb.
Usage
Included in the GliaKit boilerplate. Import it where you need it:
tsx
import { Breadcrumb } from "@/components/ui/breadcrumb";When to use
- On detail pages two or more levels deep, like a single project inside Projects.
- In the breadcrumb slot of PageHeader, where it replaces the eyebrow.
- On top-level pages, where the trail would be a single item.
- To show progress through a flow; use Stepper.
Examples
Deeper path
The trail can be as long as the hierarchy. Keep labels short and unique.
In a page header
Pass it to PageHeader's breadcrumb prop, where it takes the place of the eyebrow.
API reference
Breadcrumb
Renders a nav with an ordered list and slash separators. Does not spread other HTML attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { label: string; href?: string }[] | - | The trail from root to current page. Every item but the last is a link; the last is plain text. Labels are used as React keys, so keep them unique. |
| className | string | - | Extra classes for the nav element. |
Accessibility
- Wrapped in a nav landmark with aria-label="Breadcrumb".
- The last item has aria-current="page" and is not a link.
- Slash separators are aria-hidden, so screen readers only read the labels.
- Parent items render as plain <a> elements, which default to href="#" when no href is given. Give every parent a real href.