Skip to content
VolvoVolvo Cars Web Design System

Breadcrumbs

Edit on GitHub

Breadcrumbs are a secondary navigation pattern that shows a user's current location within a hierarchy and lets them quickly jump back to any parent level.

@volvo-cars/css v3.1.0

When to use

Section titled “When to use”

  • Deep, hierarchical content structures. Use breadcrumbs when content is organized in a hierarchy exceeding two levels.

  • Orienting users after search or a direct link. Breadcrumbs show where a page sits in the overall structure, which matters most when a user did not arrive through the primary navigation.

  • Moving up one or more levels quickly. Breadcrumbs let a user jump to a parent level without relying on the browser back button or the full primary navigation.

  • Space-constrained headers. Use breadcrumbs to add wayfinding context without the footprint of a full navigation tree.

Both location-based trails (the site’s fixed hierarchy) and path-based trails (the steps a user actually took) work. Use one type consistently across the product.

When not to use

Section titled “When not to use”

  • Single-level or flat navigation. Don’t add breadcrumbs when there is no real parent/child relationship. They add clutter with no wayfinding value.

  • Replacing primary navigation. Breadcrumbs are always secondary. Use the main navigation to let users move across sections.

  • Step-by-step processes. For flows like checkout or onboarding, where order and completion state matter more than hierarchy, use a stepper or progress indicator instead.

  • Paging through a list or dataset. Use pagination instead of breadcrumbs to move between page 1, 2, 3, and so on.

Labels

Section titled “Labels”

Match labels to the actual page or section titles, and keep them short, max 30 characters, so the trail stays predictable and scannable.

Considerations

Section titled “Considerations”
  • Avoid more than 5 levels in a trail. The component has no built-in overflow handling, so a deeper or more complex hierarchy needs a custom solution, such as truncating the middle items behind a menu or allowing the trail to wrap, to keep the layout from breaking.
  • For smaller devices, use the sm variant, which shows only the last trail link with a back chevron.
  • Current page in breadcrumbs is not interactive and will not have any states.
  • Don’t overload each item with icons, badges, or long descriptions. Keep breadcrumbs lightweight and low-emphasis.