Breadcrumb

The breadcrumb component provides a simple, secondary navigation trail to help users understand their location within a site hierarchy.

Use the .breadcrumb class on a <ul> element to create a breadcrumb trail. Each item is a link except the last, which represents the current page as plain text.

1
<nav aria-label="Breadcrumb">
2

3
  <ul class="breadcrumb">
4
    <li>
5
      <a href="#1">Home</a>
6
    </li>
7
    <li>
8
      <a href="#1">Recipes</a>
9
    </li>
10
    <li>
11
      <a href="#1">Baking</a>
12
    </li>
13
    <li aria-current="page">
14
      Focaccia
15
    </li>
16
  </ul>
17

18
</nav>

Figure 1

Figure 1 notes
Lines	Details
1	The `<nav>` element with `aria-label="Breadcrumb"` identifies the breadcrumb as a navigation landmark for assistive technology.
3	The `.breadcrumb` class on the `<ul>` element is required. It provides the component’s flex layout and caret separators between items.
13	The final item represents the current page and is plain text, not a link. Add `aria-current="page"` so assistive technology can announce the user’s location.

Breadcrumb styles can be customized by redefining the related CSS custom property.

:root {
  --breadcrumb-font-size: var(--font-size-md);
}

Figure 2

Custom property	Default	Purpose
`--breadcrumb-font-size`	`var(--font-size-md)`	Font size of breadcrumb items.

Introduction

Related Custom Properties

Read Next

Navigation

Link

Button