<h2>Anatomy</h2>
<details data-name='image-block' data-images='[{"alt":"Diagram showing four parts of the breadcrumb component on M and larger grids.","caption":"A breadcrumb trail is composed of four main elements.\n\n1. Home: a link to the home page of the experience. Not editable.\n2. Page link: navigates to the page.\n3. Separator: forward slashes that visually separate each level in the full breadcrumb trail. Not interactive.\n4. Current page: the current page title. Not interactive.","url":"https://dds.dell.com/site/stage/07/89/Breadcrumb_Anatomy_Web_31b3e03d78.png"}]' data-numberofcolumns='1'></details>

<h3>For mobile</h3>
<p>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.</p>
<details data-name='image-block' data-images='[{"alt":"Diagram showing two parts of the breadcrumb component on extra small to small grids.","caption":"For smaller breakpoints, a previous page link appears with a back arrow.\n\n1. Icon: indicating back behavior.\n2. Link: to previous page.","url":"https://dds.dell.com/site/stage/5a/d6/Breadcrumb_Anatomy_Mobile_d3cb1b8288.png"}]' data-numberofcolumns='1'></details>

<h2>Articles</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/breadcrumbs/","type":"External"},"title":"Breadcrumbs: 11 Design Guidelines","description":"Best practices from Nielsen Norman Group.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Color

### Light mode

All breadcrumb colors are designed to be consistent and accessible.

<details data-name='color-collection' data-colors='[{"color":"Gray 700, #6E6E6E","useCase":"Rest icon and page link","opacity":1,"colorBorder":""},{"color":"Gray 900, #0E0E0E","useCase":"Rest active state for current page","opacity":1,"colorBorder":""},{"color":"Blue 100, #D9F5FD","useCase":"Hover state color","opacity":1,"colorBorder":""},{"color":"Blue 600, #0672CB","useCase":"Selected text and focus text and icon","opacity":1,"colorBorder":""},{"color":"Blue 700, #0063B8","useCase":"Hover and focus state icon color","opacity":1,"colorBorder":""},{"color":"Blue 800, #00468B","useCase":"Focus outline","opacity":1,"colorBorder":""}]' data-displaymode='colorTable'></details>

## Sizes

For large or extra-large [breakpoints](/foundations/grid/#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.

<details data-name='image-block' data-images='[{"alt":"Diagram showing breadcrumb truncation versus a full breadcrumb trail.","caption":"When selecting the ellipsis, the page links expand to show all levels.","url":"https://dds.dell.com/site/stage/86/8e/Breadcrumb_Variants_Truncation_e2d1e99c32.png"}]' data-numberofcolumns='1'></details>

| 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.

<details data-name='image-block' data-images='[{"alt":"Diagram showing breadcrumb placement.","caption":"Place breadcrumbs above page titles (H1s).","url":"https://dds.dell.com/site/stage/28/85/Breadcrumb_Usage_701907beb4.png"}]' data-numberofcolumns='1'></details>

### Specifications

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

<details data-name='image-block' data-images='[{"alt":"Diagram showing breadcrumb spacing.","caption":"Place a 16-pixel margin between the masthead and the page title (h1).","url":"https://dds.dell.com/site/stage/d0/83/Breadcrumb_Spacing_fb3b958f3d.png"}]' data-numberofcolumns='1'></details>

## Interaction

### Behaviors and states

Breadcrumb navigation displays four states of interaction.

<details data-name='image-block' data-images='[{"alt":"Diagram showing breadcrumb states and behavior.","caption":"","url":"https://dds.dell.com/site/stage/1e/74/Breadcrumb_Behaviors_States_f297a6b3f4.png"}]' data-numberofcolumns='1'></details>

| 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](https://vanilla.delldesignsystem.com/iframe.html?viewMode=docs&id=components-breadcrumb--basic#seo-guidelines) for breadcrumb schema code.

Design

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/index.html?path=/docs/components-breadcrumb--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-breadcrumb--basic&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/story/components-breadcrumb--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-breadcrumb--basic&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-breadcrumb--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/2.17.0/iframe.html?args=&id=components-breadcrumb--docs&viewMode=docs&websiteFrame=true'></details>

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.