Breadcrumbs

Breadcrumbs provide secondary navigation to help users understand where they are in a website.

Overview

A breadcrumb bar shows the location of the current page in the site structure. It’s like a path from the current page back to the home page, showing each level of organization in-between.

Breadcrumbs allow a user to navigate "up" to a parent section instead of "Back" to the previous page. Use breadcrumbs to help users navigate and understand where they are within the site’s hierarchy.

Anatomy

Mandatory

Optional

Behaviors

A breadcrumb trail helps the user to visualize how content has been structured and how to navigate back to previous Web pages, and may identify the current location within a series of Web pages.

Page Title

Ancestor Page: must be a link

Active Page: is plain text only

Breadcrumbs prefer Title Case, Sentence case optional, no punctuation.

Symbol Divider

Forward Slash (/)

Mandatory

Layout

Breadcrumbs are always left aligned.

Paddings:

Left:0
Top: 0
Right: 0
Bottom: varied based on breakpoint

Gaps:

Horizontal: 4px or 0.25rem
Vertical: 8px or 0.5rem

Home

Active Page

Bottom: varied

Usage

Breadcrumbs are an optional navigational element that supports wayfinding — making users aware of their current location within the hierarchical structure of a website.

Usage of breadcrumbs is highly recommended while pairing together with complex IA structure and Mega Menu.

The breadcrumb component embeds the link component, however icons should never be configured on. This can add unnecessary visual clutter.