Breadcrumb

import { Breadcrumb } from '@yarcl/react';

1. Home
2. Projects
3. Apollo
4. Settings

1. Home/
2. …/
3. Navigation/
4. Breadcrumb

<Breadcrumb>
  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
  <Breadcrumb.Item href="/projects">Projects</Breadcrumb.Item>
  <Breadcrumb.Item href="/projects/apollo">Apollo</Breadcrumb.Item>
  <Breadcrumb.Item>Settings</Breadcrumb.Item>
</Breadcrumb>

The last item is the current page. Give it an href to keep it a link, or leave it out to render plain text.

For client-side navigation, see the router link recipe.

Long trails

Set maxItems to collapse the middle of a longer trail into an ellipsis button. Activating it shows the full trail and moves focus to the first item that was hidden. itemsBeforeCollapse and itemsAfterCollapse choose how many items stay visible on each side.

<Breadcrumb maxItems={3} separator="/">
  <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
  <Breadcrumb.Item href="/docs">Documentation</Breadcrumb.Item>
  <Breadcrumb.Item href="/docs/components">Components</Breadcrumb.Item>
  <Breadcrumb.Item href="/docs/components/navigation">Navigation</Breadcrumb.Item>
  <Breadcrumb.Item>Breadcrumb</Breadcrumb.Item>
</Breadcrumb>

Styling

The text style comes from typography.styles and the link color from colors, styled like Link. The current page uses the neutral text color and separators use the muted neutral. Set both per component in the config:

components: {
  Breadcrumb: { textStyle: 'caption', color: 'neutral' },
},

Accessibility

• Renders a <nav> landmark labelled “Breadcrumb” (override with aria-label) around an ordered list.
• The last item has aria-current="page".
• Separators are hidden from screen readers.
• Give each breadcrumb on a page its own aria-label.

Keyboard

Key	Action
Tab	moves between the links and the ellipsis button
Enter	follows a link, or expands the collapsed trail
Space	expands the collapsed trail

Props

Breadcrumb

Prop	Type	Default	Description
children	ReactNode		Breadcrumb.Items, from the root to the current page.
color	Colorconfig	config.defaults.color	Link color, from the colors config.
expandLabel	string	config.labels.expandBreadcrumb	Accessible label of the ellipsis button.
itemsAfterCollapse	number	2	Items shown after the ellipsis when collapsed.
itemsBeforeCollapse	number	1	Items shown before the ellipsis when collapsed.
maxItems	number		Collapses the middle of the trail into an expandable ellipsis when there are more items than this. Without it, the trail never collapses.
separator	ReactNode	a chevron icon	Content between items. Hidden from screen readers.
textStyle	TextStyleconfig	config.defaults.textStyle	Text style, from the typography.styles config.
underline	'none' | 'always' | 'hover'	'hover'	When to underline the links.

Breadcrumb.Item

Prop	Type	Default	Description
children	ReactNode		The item's label.
href	string		Where the item links to. Without it, the item renders as plain text.