COMPONENTS · BREADCRUMBS

Breadcrumbs

DESCRIPTION

Breadcrumbs are a sequence of navigational links that show the user's current location within a hierarchy and provide a path back to previous levels.

PLAYGROUND MODE

Shows the user's current location within a hierarchy and displays three states: Default, Hover, and Selected.

PlaygroundCurrent theme

TYPES

Two divider styles

Our breadcrumb component includes two divider styles: Arrow and Slash.

arrow

slash

STATES

Default, hover, and selected

Default crumbs are subtle and clickable. Hover becomes extrabold and underlined. The final, current-page crumb is always rendered strong and non-underlined — it isn't a navigable link.

TOKENS & TYPOGRAPHY

Implementation bindings

Defaultcolor/text/subtle

Hovercolor/text/default · ExtraBold, underlined

Selectedcolor/text/strong · ExtraBold

Dividercolor/text/muted

LabelNunito Sans · 14 px

COMPONENT STRUCTURE

01Items · Ordered list of label, optional href, optional icon

02Divider · Arrow or Slash

03Last item · Always rendered as the current, non-interactive page