Breadcrumb

Use the Breadcrumb component as part of your page navigation to inform users of the current page location and the navigational hierarchy of the page.

Examples and Code

Select exampleDefault

Open Full Example

<nav class="breadcrumb" role="navigation">
  <ol class="breadcrumb__list">
    <li class="breadcrumb__item"><a href="#">Homepage</a> › </li>
    <li class="breadcrumb__item"><a href="#">Menu Level 1 item</a> › </li>
    <li class="breadcrumb__item"><a href="#">Menu Level 2 item</a> › </li>
    <li class="breadcrumb__item">Current item</li>
  </ol>
</nav>

Usage

Add to all pages on sites or applications with deep-nested navigation.

Guidance

Usage Guidance

• Keep the breadcrumb near the top of the page content: Breadcrumbs should consistently be at the top of the page under the header so that it is easily found by users.
• Use Consistently: If you are using breadcrumbs on your page, you should use them across all similar content that is below the top level of your navigation structure.

Elements

Element	Description	Usage	Required	Multiple
Breadcrumb Title	A title/description of the breadcrumb	Add a title when you want to provide clarity on the breadcrumb’s behavior	No	No
Breadcrumb List	The list of breadcrumb links		Yes	No
Breadcrumb Item	An individual link in the breadcrumb	The current page should be plaintext instead of a link	Yes	No