# Breadcrumbs

Source: https://design.ritchiebros.com/components/navigation/breadcrumbs/

Breadcrumbs show the current page’s location within a navigational hierarchy and let people move back up to any ancestor.

## Figma

The Figma reference for **Breadcrumbs** will appear here once the design link is added.

## Storybook

Interactive examples for **Breadcrumbs** will render here once the Storybook link is wired in.

## Best practices

- Reflect the actual hierarchy, ordered from the top level down to the current page.
- Make the current page the last, non-interactive item.
- Collapse long trails on small screens rather than wrapping across lines.
- Keep each label short and matched to its destination’s title.

## Do’s and don’ts

**Do:** Use breadcrumbs to complement primary navigation in deep hierarchies.

**Don’t:** Use breadcrumbs as the only way to navigate a flat site with no hierarchy.

## Accessibility

- Wrap breadcrumbs in a navigation landmark with a label such as “Breadcrumb”.
- Mark the current page with aria-current so assistive technology announces it.

## Related components

- [Link](https://design.ritchiebros.com/components/navigation/link/)
- [Tabs](https://design.ritchiebros.com/components/navigation/tabs/)
- [AppBar](https://design.ritchiebros.com/components/surfaces/app-bar/)