Breadcrumb

Breadcrumb shows where the user is and provides a path back up the page hierarchy.

Anatomy

Spec

Breadcrumb spacing is 8px between items. The current page and prior hierarchy levels differ in typography and color for clear visual separation.

Item Status

Breadcrumb items have two states — Linked to the destination page, or Stateless. The stateless form applies when the current tab depends on a parent that doesn't have a dedicated page.

State

Breadcrumb has 3 states — Current Page, Enabled, Disabled. Enabled and Disabled look the same visually; the cursor change is the differentiator.

Page link

Breadcrumb both signals the page hierarchy and acts as a navigation control. Click an Enabled item (other than the Current Page) to navigate. Disabled items don't navigate.