components icon

Breadcrumb

A breadcrumb is a type of contextual navigation that shows a user’s position within the hierarchy of a site and allows them to navigate back through the site’s levels.

Status

PublishedElement can be used in production
Adobe XD
Adobe XD Kit
In backlogElement is in backlog
PublishedElement can be used in production
Web Components
In backlogElement is in backlog
React
React
In backlogElement is in backlog
Angular
Angular
In backlogElement is in backlog
Documentation
PublishedElement can be used in production

What's new

Breadcrumb has been updated for the Dell Design System v2 with a new color palette and accessibility enhancements. The font ramp and text color have also been updated to reflect new foundational styles. In addition, variants for mobile breadcrumbs and truncation have been added.

Anatomy

Diagram showing four parts of the breadcrumb component on M and larger grids.

A breadcrumb trail is composed of four main elements.

  1. Home: a link to the home page of the experience. Not editable.
  2. Page link: navigates to the page.
  3. Separator: forward slashes that visually separate each level in the full breadcrumb trail. Not interactive.
  4. Current page: the current page title. Not interactive.

For mobile

To optimize for smaller views on XS (extra small) or S (small) grids, abbreviate the full breadcrumb trail to show the previous page link, along with a back arrow. Note that this component is automatically coded to truncate after three levels.

Diagram showing two parts of the breadcrumb component on extra small to small grids.

For smaller breakpoints, a previous page link appears with a back arrow.

  1. Icon: indicating back behavior.
  2. Link: to previous page.

Articles

Breadcrumbs: 11 Design Guidelines

Best practices from Nielsen Norman Group.

Side navigation

Feedback