All components (204)

Breadcrumbs

Navigation · Breadcrumbs · .amset-crumbs

What it is and when to use it

The path from the home page to the screen you are on: "Home › Catalog › Rings › Aurelia Ring". All the crumbs are links except the last one, which is where you are.

When to use it

On screens that hang off others (a product page inside a category, an invoice inside a customer), to go up to any level in one jump.
With onNavigate when navigation is handled by the project's router: it is called with the key of the pressed crumb instead of following the href (the browser click is canceled). With Ctrl, Cmd, Shift or Alt, or with the middle button, the crumb opens in another tab or window and onNavigate is not called. That is why crumbs carry href even with a router: without it they cannot be opened separately or copied. If the application already registers its router at the root with the library's routing provider, the crumbs navigate with it and onNavigate is unnecessary.
renderCrumb to render each crumb your own way (an icon in front); it is still announced by its label.

When not to

On the home page or on a top-level screen: a single crumb orients nobody.
Above the title of a screen with its actions: PageHeader already renders them with its crumbs.
For the phases of a process (checkout, sign-up): that is Steps.

Keyboard: Tab goes through the crumbs that are links and Enter follows them (with onNavigate, Enter is also handled by the router). The last one is not a link and does not take focus.

Accessibility: it is a nav with a name ("Breadcrumb", or whatever label says), so it is a landmark that can be jumped to. The current crumb has aria-current="page": the screen reader says "current page" instead of reading one more link. The separators are decorative icons.

Fine-tuning: CSS variables --amset-crumbs-*: -font, -gap, -padding, -radius, -separator. The size changes the font size, the gap and the separator.

What it looks like

<Breadcrumbs
  crumbs={[
    { key: 'inicio', label: 'Home', href: '/' },
    { key: 'orders', label: 'Orders', href: '/pedidos' },
    { key: 'actual', label: 'Order 4821' },
  ]}
/>

Props

Import it with import { Breadcrumbs } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`crumbs`required	`readonly Crumb[]`	—
`className`	`string`	Merged with the library classes; it does not replace them.
`label`	`string`	What is announced on arrival. Default: "Breadcrumb".
`onNavigate`	`(key: string) => void`	So that the project's router navigates and not the browser. If passed, a normal click and Enter on a crumb call here with its `key` instead of following the `href`: the browser click is cancelled. With Ctrl, Cmd, Shift or Alt, or with the middle button, the crumb opens in another tab or window and this is not called. A crumb without `href` only notifies.
`renderCrumb`	`(crumb: Crumb, state: { readonly current: boolean; }) => ReactNode`	Paints each crumb: an icon in front, a name with a badge. The crumb is still called by its `label` for the screen reader. `current` is the last one, the page you are on.
`size`	`"sm" \| "md" \| "lg"`	The font size and the gap between breadcrumbs: xs, sm (the default) or base.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-crumbs-font`	`var(--amset-text-sm)`
`--amset-crumbs-gap`	`var(--amset-space-1)`
`--amset-crumbs-separator`	`0.875rem`
`--amset-crumbs-padding`	`2px 4px`
`--amset-crumbs-radius`	`var(--amset-radius-sm)`

How to change it

.amset-crumbs {
  --amset-crumbs-font: ...;
  --amset-crumbs-gap: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: