Navigation
Page trail
Where a detail page sits, in its title bar: the places above it as links back, then the page's own name as its heading. In a right-to-left language the chevrons point the other way.
Live example
Import
Each family is its own entry point, so a page loads only what it uses.
import { PageTrail } from "@nibapp/ui/components/page-trail";Props
Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.
PageTrail
Where a page sits, in the title bar of a page inside a place ("Races › Fix the login bug"): the places above it as links back, then the page's own name as its heading. The way back is in sight and says where it goes, so nothing depends on Back or a gesture. It is a size container. In a narrow title bar the page's name matters most: the places fold first, into one back arrow to the nearest place (named by its tooltip and accessible name), and only then does the name truncate (its whole text in a tooltip). A place's name is never cut, and no "›" is left bare.
| Prop | Type | Default | Description |
|---|---|---|---|
| places (required) | readonly PageTrailPlace[] | — | The places this page sits in, outermost first; each is a link back. |
| children | ReactNode | — | This page: its name (the page's heading), or a control that names it (a team switch). Absent when the page's own content names it (an artifact's toolbar): the trail is then the way back alone ("‹ Artifacts"). |
Also takes the props of a <nav> element, except children.