<h2>What’s new in v3</h2>
<ul>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Use breadcrumbs to help users understand their location within a hierarchical structure and quickly navigate back to higher‑level pages.</p>
<p>Use breadcrumbs to:</p>
<ul>
<li>Show users where they are in a hierarchy.</li>
<li>Help them move back to previous levels.</li>
<li>Give context when they land deep in the site.</li>
</ul>
<h2>Anatomy</h2>
<p>A breadcrumb trail is composed of four main elements.</p>
<p>This component supports the use of slots. For more details about how to use slots, see the <a href="/components/breadcrumb?tab=Design#design-layout">layout</a> section.</p>
<details data-name='image-block' data-images='[{"alt":"Diagram showing four parts of the breadcrumb component on M and larger grids.","caption":"1. 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/v3/components/breadcrumb/breadcrumb-anatomy-1.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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/v3/components/breadcrumb/breadcrumb-anatomy-2.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Use the breadcrumb to show users where they are within a page hierarchy and to help them move back to previous levels. It works best in experiences with multiple layers, where users may need to navigate up the structure quickly.

Place breadcrumbs near the top of the page, above the main heading. Each item leads to a parent page, except for the last one, which represents the current page and stays non‑interactive.

Avoid using breadcrumbs when the experience is flat or not hierarchical, or when another navigation pattern already provides enough context on its own.

## 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/v3/components/breadcrumb/breadcrumb-sizes.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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

### Building block

A slot is available in this component to support flexible composition. It allows users to place additional elements such as images, text blocks, or other components while preserving the component’s layout, padding, and visual consistency.

<details data-name='image-block' data-images='[{"alt":"Example of the component with building block and slot.","caption":"","url":"https://dds.dell.com/site/v3/components/breadcrumb/breadcrumb-slot.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### 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/v3/components/breadcrumb/breadcrumb-layout-1.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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/v3/components/breadcrumb/breadcrumb-layout-2.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Interaction

### Behaviors and states

Breadcrumb navigation displays four states of interaction.

Home behaves the same as a [button](/components/button) component, even though in the breadcrumb it is implemented as a link.

<details data-name='image-block' data-images='[{"alt":"Diagram showing breadcrumb states and behavior.","caption":"","url":"https://dds.dell.com/site/v3/components/breadcrumb/breadcrumb-interaction.png"}]' data-numberofcolumns='1' data-hideWidget='false'></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/index.html?path=/docs/components-breadcrumb--docs) for breadcrumb schema code.

Design

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                         | Collection | CSS var                                   | Preview  |
| ---------------------------- | ---------- | ----------------------------------------- | -------- |
| breadcrumb/gap               | Component  | `var(--dds-breadcrumb-gap)`               | \-       |
| breadcrumb/home/padding      | Component  | `var(--dds-breadcrumb-home-padding)`      | \-       |
| link/gap                     | Component  | `var(--dds-link-gap)`                     | \-       |
| icon/size/xs                 | Component  | `var(--dds-icon-size-xs)`                 | \-       |
| link/neutral/rest            | Component  | `var(--dds-link-neutral-rest)`            | \#1D2C3B |
| link/rest                    | Component  | `var(--dds-link-rest)`                    | \#0063B8 |
| color/text/NEUTRAL/rest      | Semantic   | `var(--dds-color-text-neutral-rest)`      | \#1D2C3B |
| size/4                       | Global     | `var(--dds-size-4)`                       | \-       |
| size/16                      | Global     | `var(--dds-size-16)`                      | \-       |
| border/radius/xs             | Semantic   | `var(--dds-border-radius-xs)`             | \-       |
| border/width/xs              | Global     | `var(--dds-color-purple-10)`              | \#FBEBFF |
| color/purple/80              | Global     | `var(--dds-color-purple-80)`              | \#66278F |
| color/text/primary           | Semantic   | `var(--dds-color-text-primary)`           | \#1D2C3B |
| button/gap/xs                | Component  | `var(--dds-button-gap-xs)`                | \-       |
| button/padding-horizontal/xs | Component  | `var(--dds-button-padding-horizontal-xs)` | \-       |
| button/size/xs               | Component  | `var(--dds-button-size-xs)`               | \-       |
| button/background/ghost-rest | Component  | `var(--dds-button-background-ghost-rest)` | \-       |
| color/text/BRAND/rest        | Semantic   | `var(--dds-color-text-brand-rest)`        | \#0063B8 |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-breadcrumb--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-breadcrumb--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-breadcrumb--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-breadcrumb--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-breadcrumb--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-breadcrumb--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></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.