A breadcrumb answers a question a page cannot answer about itself: where am I, and what is above me. It states the hierarchy as an ordered trail, each step a destination, and the last step the page itself, which is why the current location is text rather than a link, because a link to where you already are leads nowhere. The trail is data, so the page states its steps and the component supplies the structure: a named navigation landmark, an ordered list, and separators that a screen reader never has to listen to. ```tsx demo="navigation/breadcrumb-preview" ``` ## Usage ```tsx import { Breadcrumb } from "@asheeui/web"; ; ``` ## The current location A step is `label`, `href` and its state. The last step is the current location unless another step marks itself with `isCurrent`, and the current location is presented as text with `aria-current="page"`, not as a link, and not as a differently coloured link. ```tsx demo="navigation/breadcrumb-current" ``` Stating `isCurrent` explicitly is what a trail generated from URL segments needs: every segment has a destination, including the page being shown, and the marker is how the page says which one it is. A step without an `href` is also presented as text, which suits a level in the hierarchy that has no page of its own. ## Separators and scale `separator` is the mark between two steps. It is decoration: the component hides it from assistive technology, so it is never read as content, and the default is a chevron drawn small beside the trail. `size` scales the text, the gap and that mark together, so a trail in a page header and one in a card do not drift apart. ```tsx demo="navigation/breadcrumb-separator" ``` `color` is the colour of the *links* in the trail. The current location stays in the foreground colour at a medium weight, so it reads as the end of the trail rather than as one more destination. ## Props ```props Breadcrumb ``` `size` is registered by the component as `md`, so it resolves from the instance, then `components.breadcrumb`, then that value. `color` is deliberately not registered: it resolves from the application's `defaultColor` and then `primary`, which is what makes the trail's links the same accent as every other link on the page. `label` and `separator` are statements about one trail, not about the product's look, so they are instance props with their own defaults rather than configuration. A trail is a web idiom: `@asheeui/native` does not ship a breadcrumb, and a platform screen shows a titled header with a back control instead, because that is how a hierarchy is left on a device. See [React Native](/platforms/native). ## Accessibility - The trail is a `navigation` landmark named by `label` (`"Breadcrumb"`), which is what distinguishes it from the bar's navigation and from any other navigation on the page. - Its steps are an ordered list, so a reader is told the position and the length of the trail rather than only its contents. - The current location is a ``: it is announced as the current page and it is not a control, so it never appears as a link that goes nowhere. - The separators are wrapped in `aria-hidden`, so a reader hears the labels of the trail and not a run of chevrons; `separator` can be replaced with any content and the treatment is the same. Linked steps are drawn by the framework's link primitive, so a step that navigates inside the application keeps the page's own router element. `link={{ component, props }}` states it once for the whole trail, and a step's own `component`/`componentProps` win over it, the same two levels `Navbar` and `Footer` offer. See [links and substitution](/concepts/substitution). ## Related ```related link, navbar, footer ```