Breadcrumb

v2.2

Breadcrumbs show the navigational hierarchy of a page.

  • CSS
  • Marko
  • React
Stylized graphic of a breadcrumb.

Considerations

Guiding

Breadcrumbs help wayfinding no matter how many layers.

Hierarchal

Breadcrumbs show a user's current location within the hierarchy of a site.

Contextual

Breadcrumbs help users understand what screen they're on relative to the information architecture.

Anatomy

Properties

Behavior

Screen sizes

Small

Web collapses all parent pages into an overflow and only surfaces the last item. Native apps do not use breadcrumbs. Instead, use the top navigation bar with a back action.

A small web design of a view item page. Breadcrumb navigation is placed under the top navigation. The breadcrumb has two pages separated by an overflow icon and chevrons on either side.

Web

A small native design of a view item page. This design does not have breadcrumbs and only has a top navigation bar with a left chevron to navigate backward.

Native

Best practices

Specs

A detailed spec of a breadcrumb. From left to right reads page 1, chevron, overflow icon, page 3, chevron, page 4. The height of the overall breadcrumb with the overflow icon is 24px tall. Spacing on either side of the chevrons are 6px. The overflow icon is 24px wide and tall. The chevron icons are 12px. The height of the page titles are 16px.