Breadcrumbs
Where this page sits.
Why it exists, next to BackLink
BackLink answers “how do I get out of here” and is the right thing for one level. This is for the pages that are three deep — a Grove page inside a space, a Branch task inside a project inside a cycle — where “← Back” names one of three possible destinations and the reader cannot tell which.
One level up is still BackLink
A two-crumb breadcrumb is a back link with extra punctuation.
In both themes
light
dark
Guidance
Use it when
- Three levels or more, where the parent is not obvious from the page itself.
- A hierarchy that is real. If the crumbs are a route rather than a containment, they are a lie about where the page lives.
- as={Link} so each crumb is a client navigation.
Reach for something else when
- One or two levels. BackLink is shorter and says the same thing.
- Giving the last crumb an href. It is a link to the page you are on: a click that does nothing.
- A path so long it wraps twice. Then the hierarchy is the problem, not its display.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { label, href? }[] | — | In order, ancestors first. The last is the current page and takes no href. |
| as | ElementType | "a" | A framework link component — Next's <Link>. |
| label | string | "Breadcrumb" | Names the nav landmark, for a page with several. |
Accessibility
A <nav> around an <ol>, because the order is the meaning. The chevrons are aria-hidden, so a screen reader reads “Spaces, Engineering, Runbooks” rather than three separators interleaved with the names. The final crumb is plain text with aria-current="page" — which is what actually tells an assistive reader where they are, and is the part a styled-differently last link does not do.