Breadcrumb

Definition

The Breadcrumb component provides users with a clear indication of their location within the site’s static hierarchical structure. This aids navigation and contextual awareness by showing the path from the site’s origin/root to the current page.

Description

Layout

Display breadcrumbs as a horizontal list of links, each representing a hierarchical page level.
Use a standard delimiter (“/”) between levels as per Bootstrap 5 Breadcrumbs.

Labels

Each breadcrumb label is derived from the page's title (or a title-equivalent). The label for the origin/root may vary as appropriate to context (e.g., "Home," "Root," site name, etc.).

Icons

Optional, and should not compromise label clarity. (Low priority.)

Responsiveness

On mobile, display a link to go to the immediate parent (one level higher) to conserve space and reduce clutter. If it overflows the given space, the breadcrumb items will be wrapped and take another line.

Interaction

All levels except the current level are clickable and serve as navigation links.
Include the current page as the last item (unlinked).

Use Cases and Placement

Breadcrumbs are specifically for pages not directly reachable via the main navigation, serving as auxiliary navigation. It is usually placed before H1 (see Breadcrumb position below).

Breadcrumbs are shown: On child pages of main subpages, such as ICPSR’s “Membership Overview,” “Summer Program Home,” “Overview.” Also under sections like "Teaching & Learning."
Breadcrumbs are NOT shown: On main pages/direct links that are accessible from the primary Header menu.
Breadcrumb position: Its position is above the Hero title. Breadcrumbs should be the top of the page. The position of the Breadcrumb with Splash image is the top most area inside of the splash white box (text area).

Examples

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Teaching & Learning</a></li>
    <li class="breadcrumb-item"><a href="#">Teaching with Data</a></li>
    <li class="breadcrumb-item">
      <a href="#">Navigating Around Restriced Data</a>
    </li>
    <li class="breadcrumb-item active" aria-current="page">
      Why are some data restricted?
    </li>
  </ol>
</nav>

Hide

See an example page with a breadcrumb.

Accessibility

From Bootstrap:

Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as aria-label="breadcrumb" to describe the type of navigation provided in the <nav> element, as well as applying an aria-current="page" to the last item of the set to indicate that it represents the current page.
For more information, see the ARIA Authoring Practices Guide breadcrumb pattern.

Variables

$breadcrumb-margin-bottom: $spacer-lg;
$breadcrumb-divider-color: $grey-200;

References

Breadcrumb in Bootstrap