Breadcrumbs

Breadcrumbs options
Choice	Values	Default	What it does
`sizesmbk-breadcrumbs--size-<value>`	`mdsm`	`md`	Figma: Medium, Small.
`overflowsmbk-breadcrumbs--overflow-<value>`	`fullcollapsed`	`full`	Full shows every crumb, wrapping when the room runs out. Collapsed keeps the first crumb, the parent and the current page, and folds the crumbs between them behind a "more" button that opens them as a list of links; a trail of three or fewer shows whole.

Partssmbk-breadcrumbs__itemsmbk-breadcrumbs__linksmbk-breadcrumbs__labelsmbk-breadcrumbs__iconsmbk-breadcrumbs__separatorsmbk-breadcrumbs__more

Root to current page; the last crumb is the page and is not a link.

Two text sizes; the separator follows the size.

An icon before each page name, at both sizes; the names still say where each crumb goes.

Long trails wrap onto a second line when the space is narrow.

Collapsed keeps the first crumb, the parent and the page; the "more" button opens the crumbs between them.

Purpose

Shows where the current page sits in the site, as a trail of links from the root down to here, so the reader can step back up one level or several. It differs from the tabs component in that it points upward through a hierarchy rather than sideways between siblings.

When to use

Any page three or more levels deep in a hierarchy.
Documentation, catalogs and settings trees.

When not to use

Flat sites with one level. There is nothing to trail back through.
Switching between sibling views. Use tabs.
A single "back" step. Use a link with a leading caret.

Usage rules

Do

Put the site root first.
Keep page names short; they wrap, but a long trail reads badly.
Give icons to every crumb or to none, so the trail reads as one line of the same things.

Don't

Repeat the page title in the last crumb if the heading is directly beneath. Shorten it instead.

Start the trail at the site root, so the reader always knows where the top is.

Don't

A trail that starts halfway down hides how the reader got here.

Keep each page name to a word or two, so the trail fits on one line.

Don't

Long page names wrap the trail and make it hard to scan.

Anatomy

The block, an ordered list inside a navigation landmark.
The item part, one page in the trail.
The link part, the page name. Every item but the last is a link; the last is the current page and is marked as such.
The label part, the page's name inside the link. On hover the line runs under it alone, never under the icon or the gap beside it.
The icon part, optional, a small decorative icon before a page name, in the subtle text color. Give every crumb one or none.
The separator part, the small caret between items, which follows the size as the icons do.
The more part, when folded: the ghost extra-small icon button standing for the crumbs between the first and the parent.

Behavior

Static. Items wrap onto a second line when the space is narrow. The current page is not a link and has no hover.

Folded, a trail of more than three crumbs shows the first, the parent and the current page, with the "more" button between the first and the parent. Pressing it opens the crumbs in between as a list of links under it, in order; Escape or a press outside closes it and returns focus to the button. A trail of three or fewer shows whole.

On a touch screen each crumb keeps its look and takes an invisible press area round it, out to the comfortable touch target; up and down it reaches only halfway into the trail's gap, so the rows of a trail that wraps never meet.

What it does for you

The list sits in a navigation landmark named "Breadcrumb" by default.
The last item carries the current-page marker, which screen readers announce.
The "more" button is named "More pages" by default (moreLabel) and says whether its list is open. Its list is a named group of links, not a menu.
Separators and the icons before page names are decorative and hidden from assistive technology; the page names carry the meaning.

What you must do

Pass another landmark name when a page has more than one breadcrumb trail.
Pass moreLabel in the page's own language when the page is not in English. The "more" button's name keeps its English unless the page gives its own.

How to test

Tab through the trail: each crumb is a link and the "more" button takes focus in turn, with the focus ring showing in both themes and in a forced-color mode.
Open the "more" button with Enter or Space, then press Escape: the list closes and focus is back on the button.
With a screen reader, the trail is found as a navigation named "Breadcrumb", the last crumb is announced as the current page, and separators and icons are not read.
With text at 200% and the page 320 pixels wide, the trail wraps or folds and every crumb stays reachable.

Keyboard

Breadcrumbs keys
Key	What it does
`Tab`	Moves focus to the next crumb, then to the "more" button when the trail is folded.
`Shift`+`Tab`	Moves focus back.
`Enter`	Follows the focused link. On the "more" button, opens its list or closes it.
`Space`	On the "more" button, opens its list or closes it.
`Escape`	Closes the open list and returns focus to the "more" button.

The files the breadcrumbs is made of. Its folder on GitHub (opens in a new tab) holds them with its wrapper and its document.

Stylesheet

breadcrumbs.css

/* smbk-breadcrumbs — Breadcrumbs. Figma "Breadcrumbs" 4136:867.
 * A trail of links to the pages above this one, ending on the current page.
 * Figma paints the ancestors with the muted link color and the current page
 * with the plain link color; the separators take the muted color too. A crumb
 * may carry a decorative icon before its name, in the subtle text color. Crumbs
 * and separators sit the small inline gap apart; the separator follows the size,
 * as the icon does. Folded, a "more" button stands for the crumbs in between. */

.smbk-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--smbk-space-inline-sm);
  margin: 0;
  padding: var(--smbk-space-inset-xs) 0;
  list-style: none;
}

.smbk-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--smbk-space-inline-sm);
}

.smbk-breadcrumbs__link {
  display: inline-flex;
  align-items: center;
  gap: var(--smbk-space-inset-2xs);
  color: var(--smbk-color-text-link-disabled);
  font-family: var(--smbk-typography-body-md-font-family);
  font-size: var(--smbk-typography-body-md-font-size);
  font-weight: var(--smbk-typography-body-md-font-weight);
  line-height: var(--smbk-typography-body-md-line-height);
  letter-spacing: var(--smbk-typography-body-md-letter-spacing);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

@media (hover: hover) {
  .smbk-breadcrumbs__link:hover {
    color: var(--smbk-color-text-link-hover);
  }

  /* The line runs under the name, never under an icon or the gap beside it, and the current page has none. */
  .smbk-breadcrumbs__link:not([aria-current="page"]):hover > .smbk-breadcrumbs__label {
    text-decoration-line: underline;
    text-decoration-color: var(--smbk-color-text-link-underline-hover);
    text-decoration-thickness: var(--smbk-border-width-link-underline);
    text-underline-offset: var(--smbk-space-link-underline);
  }
}

.smbk-breadcrumbs__link:focus-visible {
  outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
  outline-offset: var(--smbk-focus-ring-offset);
  border-radius: var(--smbk-radius-full);
}

.smbk-breadcrumbs__link[aria-current="page"] {
  color: var(--smbk-color-text-link);
  text-decoration: none;
  cursor: default;
}

.smbk-breadcrumbs__icon {
  flex-shrink: 0;
  color: var(--smbk-color-text-subtle);
  font-size: var(--smbk-size-icon-sm);
}

.smbk-breadcrumbs__separator {
  color: var(--smbk-color-text-link-disabled);
  font-size: var(--smbk-size-icon-sm);
}

/* Folded, the crumbs between the first and the parent wait behind the "more" button, the ghost
   extra-small icon button, which opens them as a list of links. Its dots are the crumbs' icon size,
   as Figma draws them: 16 beside the medium crumbs, 12 beside the small. */
.smbk-breadcrumbs__more {
  flex-shrink: 0;
}

.smbk-breadcrumbs .smbk-breadcrumbs__more .smbk-btn__icon {
  font-size: var(--smbk-size-icon-sm);
}

.smbk-breadcrumbs--size-sm .smbk-breadcrumbs__more .smbk-btn__icon {
  font-size: var(--smbk-size-icon-xs);
}

/* ---- sizes ---- */

.smbk-breadcrumbs--size-sm .smbk-breadcrumbs__link {
  font-family: var(--smbk-typography-body-sm-font-family);
  font-size: var(--smbk-typography-body-sm-font-size);
  font-weight: var(--smbk-typography-body-sm-font-weight);
  line-height: var(--smbk-typography-body-sm-line-height);
  letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}

.smbk-breadcrumbs--size-sm .smbk-breadcrumbs__icon,
.smbk-breadcrumbs--size-sm .smbk-breadcrumbs__separator {
  font-size: var(--smbk-size-icon-xs);
}

/* ---- touch: each crumb takes an invisible press area ----
   On a touch screen an invisible area, centred on each link and on the "more" button, takes the press out to the
   comfortable target side to side, and up and down as far as halfway into the trail's gap, so the rows of a trail
   that wraps never meet. What is drawn, the focus ring and every place stay as they are. */

@media (pointer: coarse) {
  .smbk-breadcrumbs__link {
    position: relative;
  }

  .smbk-breadcrumbs__link::after,
  .smbk-btn.smbk-breadcrumbs__more::after {
    content: '';
    position: absolute;
    inset-inline: min(0%, (100% - var(--smbk-size-target-comfortable)) / 2);
    inset-block: max(min(0%, (100% - var(--smbk-size-target-comfortable)) / 2), var(--smbk-space-inline-sm) / -2);
  }
}

Tokens it reads

Breadcrumbs tokens
Token and CSS	Value	Preview	Foundation
space.inline.sm--smbk-space-inline-sm	comfortable: 6pxcompact: 4pxchanges with density		Spacing
space.inset.xs--smbk-space-inset-xs	4px		Spacing
space.inset.2xs--smbk-space-inset-2xs	2px		Spacing
color.text.link-disabled--smbk-color-text-link-disabled	light: #606a75dark: #9ba5b1changes with theme		Color
typography.body-md--smbk-typography-body-md-font-family--smbk-typography-body-md-font-size--smbk-typography-body-md-font-weight--smbk-typography-body-md-line-height--smbk-typography-body-md-letter-spacing--smbk-typography-body-md-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 16pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
color.text.link-hover--smbk-color-text-link-hover	light: #111213dark: #f3f5f8changes with theme		Color
color.text.link-underline-hover--smbk-color-text-link-underline-hover	light: #4e555e80dark: #9ba5b180changes with theme		Color
border-width.link-underline--smbk-border-width-link-underline	1.5px		Border width
space.link-underline--smbk-space-link-underline	4px		Spacing
focus.ring.width--smbk-focus-ring-width	2px		Focus
color.border.focus--smbk-color-border-focus	light: #cc0d0ddark: #f34336changes with theme		Color
focus.ring.offset--smbk-focus-ring-offset	2px		Focus
radius.full--smbk-radius-full	9999px		Radius
color.text.link--smbk-color-text-link	light: #232527dark: #e7ebf0changes with theme		Color
color.text.subtle--smbk-color-text-subtle	light: #4e555edark: #9ba5b1changes with theme		Color
size.icon.sm--smbk-size-icon-sm	16px		Size
size.icon.xs--smbk-size-icon-xs	12px		Size
typography.body-sm--smbk-typography-body-sm-font-family--smbk-typography-body-sm-font-size--smbk-typography-body-sm-font-weight--smbk-typography-body-sm-line-height--smbk-typography-body-sm-letter-spacing--smbk-typography-body-sm-text-transform	fontFamily: Geist, Geist Fallback, system-ui, sans-seriffontSize: 14pxfontWeight: 400lineHeight: 1.5letterSpacing: 0px	The quick brown fox	Typography
size.target.comfortable--smbk-size-target-comfortable	44px		Size

Manifest

breadcrumbs.manifest.json

{
  "name": "breadcrumbs",
  "block": "smbk-breadcrumbs",
  "summary": "The trail of pages above this one, each a link, ending on the page the reader is on.",
  "adapt": "css",
  "axes": {
    "size": {
      "values": [
        "md",
        "sm"
      ],
      "default": "md",
      "description": "Figma: Medium, Small."
    },
    "overflow": {
      "values": [
        "full",
        "collapsed"
      ],
      "default": "full",
      "description": "Full shows every crumb, wrapping when the room runs out. Collapsed keeps the first crumb, the parent and the current page, and folds the crumbs between them behind a \"more\" button that opens them as a list of links; a trail of three or fewer shows whole."
    }
  },
  "flags": {},
  "parts": [
    "item",
    "link",
    "label",
    "icon",
    "separator",
    "more"
  ],
  "figmaNodeId": "4136:867"
}

Menu

Customize the preview

Options

Examples

Usage

Sizes

With icons

Deep trail

Folded

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Keyboard

Source

Options

Examples

Usage

Sizes

With icons

Deep trail

Folded

Guidelines

Purpose

When to use

When not to use

Usage rules

Do

Don't

Anatomy

Behavior

Accessibility

What it does for you

What you must do

How to test

Keyboard

Related

Source