Breadcrumbs

Breadcrumbs are a navigation element used to show a user's location in a digital product.

UsageCodeAccessibility
  <sl-breadcrumbs>
    <a href="...">Settings</a>
    <a href="...">My profile</a>
    <a href="...">Details</a>
  </sl-breadcrumbs>

When to use

Hierarchy representation

Breadcrumbs visually depict the structural hierarchy of a digital product. They guide users through layers of content, showing where they are within the system. Each breadcrumb link corresponds to a specific level in the hierarchy. They typically appear horizontally at the top of a digital product.

When not to use

Limited content depth

When your digital product has shallow navigation, breadcrumbs may add clutter without significant benefit. If there are only one or two layers of hierarchy, users can find their way without breadcrumbs.

User navigation path

The actual path a user takes during their session may differ from the breadcrumb trail and is not shown within the breadcrumb. Users might jump directly from one section to another, use search functionality, or follow external links. Their journey can be nonlinear and influenced by various factors.

Anatomy

ItemNameDescriptionOptional
1BreadcrumbsCombines a number of ‘breadcrumb items’ and separatorsno
2Breadcrumb itemAn a href link, it can include an icon in front of the linkno
3SeparatorVisual separator that appears after ‘breadcrumb items’no

Options

With these options, you can tweak the appearance of the breadcrumbs in Figma. They are available in the Design Panel so you can compose the breadcrumbs to exactly fit the user experience need for the use case you are working on.

Base settings

ItemOptionsDescription
Typedesktop mobile homeTo indicate the sizing of the breadcrumb
Page up to and including 3booleanTo indicate which pages are visible within the breadcrumb
CurrentbooleanTo indicate if the active page is visible in the end of the breadcrumb

Home item

ItemOptionsDescription
Stateidle hover active currentIndicate the state of the home item
Show iconbooleanIndicates if the icon is visible
Show labelbooleanIndicates if the label is visible

Page up to and including 3

ItemOptionsDescription
OverflowbooleanIndicates if the page is visble or truncated
Stateidle hover active currentIndicates if the icon is visible
TextvalueThe title of the page

The option below is only shown when the overflow option is selected.

ItemOptionsDescription
MenubooleanIndicates if the menu with truncated pages is open or closed
Interactive example