Breadcrumbs · envUI Docs

Import

import { Breadcrumbs } from '@envsemble/envui';

Usage

<Breadcrumbs
  items={[
    { label: 'Northwind', href: '/' },
    { label: 'Launch', href: '/launch' },
    { label: 'Launch brief' },
  ]}
/>

items run from the top down to the current page, the last item, which is never a link. Each has its label; with href it is a link, through the router link from LinkProvider; with onClick it is a button; with neither it is plain text.

Without addresses

Give levels onClick where the application has no URLs. Pressing one makes it the current page, which is not a control, so move focus yourself, such as to the new title, as the WithoutUrls example does.

One line

wrap is true by default. wrap={false} keeps the trail on one line, for a bar or a header. A label beyond 20 rem ends with an ellipsis, with a tooltip on hover and keyboard focus.

Composition

The landmark is named Breadcrumb; aria-label tells two trails on a page apart. Pair it with the main navigation, such as a NavigationDrawer. Each level sits in an item, env-breadcrumbs-item. The chevrons mirror in right-to-left text.

Accessibility

You provide

The routing behind href, through LinkProvider, or the navigation behind onClick.
An aria-label that tells two trails on a page apart.
Where focus goes after a level is pressed, such as the new page's heading.

envUI provides

A nav landmark named Breadcrumb around an ordered list.
aria-current="page" on the last level, which is never a link.
Separators hidden from assistive technology, and full labels for those cut short.

Props

The path from the top level to the current page; earlier levels are links.

Prop	Type	Description
`items`required	`readonly BreadcrumbsItem[]`	From the top level to the current page, which is last.
`wrap`Default `true`	`boolean`	The trail wraps onto more lines when it runs out of room; true by default. False keeps it on one line, for a bar or header: the current page is cut short first, and earlier levels keep their width.
`aria-label`Default `'Breadcrumb', or EnvUIProvider's messages.breadcrumbs.label`	`string`	Accessible name of the navigation landmark; name each trail where a page has several.
`className`	`string`	Classes for the `nav` element.

Also accepts the native props of <nav>, such as ref, className and aria-* attributes.

Part names

Each part's class and state attributes are public and versioned, for an application's CSS to style.

env-breadcrumbs: The breadcrumb navigation.
env-breadcrumbs-current: The current page, the last crumb.
env-breadcrumbs-item: One crumb.
env-breadcrumbs-label: A crumb's text.
env-breadcrumbs-link: A crumb's link.
env-breadcrumbs-list: The list of crumbs.
env-breadcrumbs-separator: The separator between two crumbs.
env-breadcrumbs-text: A crumb that is not a link.
data-nowrap: Present

Strings

EnvUIProvider's messages overrides each, and a component's own label prop wins over it.

messages.breadcrumbs.label: "Breadcrumb" Names the breadcrumb navigation.

Changelog

1.0.0: A label cut short with an ellipsis shows in full in a tooltip, on hover and keyboard focus; a plain level or the current page cut short takes keyboard focus for it, keeping aria-current. The landmark's default name comes from messages.breadcrumbs, and the nav takes ref, style and native props. Classes: env-breadcrumb and env-breadcrumb-* are env-breadcrumbs-item and env-breadcrumbs-*.
1.0.0-prerelease.6: Colors under the pointer and while pressed change with --env-motion-ease-enter, rather than easing in slowly, so hover and press show from the first frame.
1.0.0-prerelease.5: An item's type is BreadcrumbsItem, after the component, where it was BreadcrumbItem.