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

Figma UI Kit	PublishedElement can be used in production
Vanilla	PublishedElement can be used in production
Angular	In backlogElement is in backlog
React	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

A breadcrumb trail is composed of four main elements.

Home: a link to the home page of the experience. Not editable.
Page link: navigates to the page.
Separator: forward slashes that visually separate each level in the full breadcrumb trail. Not interactive.
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.

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

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

Articles

Best practices from Nielsen Norman Group.

Feedback

Color

Light mode

All breadcrumb colors are designed to be consistent and accessible.

Color	Use cases	Hex
Gray 700	Rest icon and page link	#6E6E6E
Gray 900	Rest active state for current page	#0E0E0E
Blue 100	Hover state color	#D9F5FD
Blue 600	Selected text and focus text and icon	#0672CB
Blue 700	Hover and focus state icon color	#0063B8
Blue 800	Focus outline	#00468B

Sizes

For large or extra-large breakpoints, use the full breadcrumb until it becomes too long for the view. For medium breakpoints, it is recommended to use a truncated version.

For more than three levels, breadcrumbs are automatically truncated using an ellipsis (…). Selecting the ellipsis will reveal the full site hierarchy leading to the current page.

When selecting the ellipsis, the page links expand to show all levels.

Size	Use case
Large	Use the full breadcrumb for L to 5XL grids until it becomes too long, at which point it should be truncated. When truncated, clicking the ellipsis will expand to the full breadcrumb. Recommended breakpoints: L to 5XL
Medium	The truncated version of the breadcrumb automatically occurs in smaller grid sizes. Recommended breakpoints: M
Small and extra small (mobile)	Only show a link to the previous page for XS to S grids, along with a back arrow. Recommended breakpoints: S and XS

Layout

Placement

Place the breadcrumb trail in the top left of the main content area, between the masthead and page title. Start the breadcrumb with the home page and follow the page-level hierarchy leading to the current or active page.

Place breadcrumbs above page titles (H1s).

Specifications

These are spacing specifications built into the component. Include a 16-pixel margin between the masthead, breadcrumb, and the page title (H1). All units of measurement are in pixels.

Place a 16-pixel margin between the masthead and the page title (h1).

Interaction

Behaviors and states

Breadcrumb navigation displays four states of interaction.

State	Behavior
Rest	The rest state is the starting or ending state, indicating the page link has not yet been selected.
Hover	When a user hovers over a selection, a highlight appears, indicating which page link is selectable.
Active	Active state features darker text (Gray 900), indicating the current page the user is viewing.
Focus	A blue outline appears around the selection and its label when a user tabs or uses keyboard controls to navigate selections.

Standards

SEO

Breadcrumb helps search engineers navigate a website and find content to index. Keep navigation breadcrumbs short, simple, and to the point. Include important keywords whenever possible. See Storybook for breadcrumb schema code.

Live demo

This demo lets you interact with the component and view the code. To see other interactive examples of this component or for additional developer documentation, visit Storybook.

You are now entering a live demo of the component.

<nav data-dds="breadcrumb" aria-label="breadcrumb">
  <ol id="list-6" class="dds__breadcrumb">
    <li class="dds__breadcrumb__item">
      <a href="javascript:;">
        <i class="dds__icon dds__icon--home" aria-hidden="true"></i>
        <span class="dds__sr-only">Home</span>
      </a>
    </li>
    <li class="dds__breadcrumb__item"><a href="javascript:;">APEX</a></li>
    <li class="dds__breadcrumb__item"><a href="javascript:;">Multi Cloud</a></li>
    <li class="dds__breadcrumb__item"><a href="javascript:;">Cloud Solutions</a></li>
    <li class="dds__breadcrumb__item"><a href="javascript:;">Energy</a></li>
    <li class="dds__breadcrumb__item"><a href="javascript:;">Healthcare</a></li>
    <li class="dds__breadcrumb__item">Government</li>
  </ol>
</nav>

Copy code

View the breadcrumb demo and code in Vanilla.

Breadcrumb

Status

Contents

What's new

Anatomy

For mobile

Articles

Breadcrumbs: 11 Design Guidelines

Feedback

Contents

Contents

Color

Light mode

Sizes

Layout

Placement

Specifications

Interaction

Behaviors and states

Standards

SEO

Contents

Contents

Live demo

You are now entering a live demo of the component.

Vanilla

Contents

Breadcrumb

Status

Contents

What's newCopy link to this section

AnatomyCopy link to this section

For mobile

ArticlesCopy link to this section

Breadcrumbs: 11 Design Guidelines

Feedback

Contents

Vanilla

What's new

Anatomy

Articles