Breadcrumbs

To allow a user to keep track of where they are in an application structure.

Anatomy

Parent category
Separator
Child Page

Example

Coded example

Code snippet

									
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="">First level</a></li>
    <li class="breadcrumb-item"><a href="">Second level</a></li>
    <li class="breadcrumb-item active" aria-current="page">Current page</li>
  </ol>
</nav>

									
  None required

Figma prototype

Usage guide

Dos and don'ts

Follow the information architecture naming conventions.

When a user needs to understand where they are in an application and able to move between levels in the journey.

On large applications.

If you have other navigation visible such as a side bar breadcrumbs would be overkill. Only use breadcrumbs when the application has multiple levels.

In a one page application.

Make it complicated.