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

Figma 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
  <sl-breadcrumbs>
    <a href="...">Learning and Teaching</a>
    <a href="...">Pupils</a>
    ...
    <a href="...">Learning Materials</a>
  </sl-breadcrumbs>

API

Component has a range of properties to define the experience in different use cases.

Properties

NameAttributeTypeDefaultDescription
breadcrumbs-Breadcrumb[][]The slotted breadcrumbs.
collapseThreshold-number3The threshold for when breadcrumbs should be collapsed into a menu.
static homeUrlhome-urlstring'/'The url for the home link, defaults to the root url.

By changing this static property you can change the default value for all future instances of the component.
Changing the static property won't affect already created instances.
homeUrl-The url for the home link, defaults to the root url.

If you want to change the default value for all future instances of the component, you can change the static property.
If you want to change the property of an already created instance, you need to change this property.
static noHomeno-homebooleanfalseWhen true doesn't show a home link as the first breadcrumb.

By changing this static property you can change the default value for all future instances of the component.
Changing the static property won't affect already created instances.
noHome-When true doesn't show a home link as the first breadcrumb.

If you want to change the default value for all future instances of the component, you can change the static property.
If you want to change the property of an already created instance, you need to change this property.

Slots

NameDescription
defaultThe breadcrumbs to display.

Accessibility Considerations

  • Breadcrumbs are organized using a numbered list. This is because when we label nav elements as 'breadcrumb,' it tells users that this structure is a breadcrumb trail, making it easy for them to find their way around.
  • We use CSS to add visual separators between breadcrumb items while keeping them hidden from screen readers using aria-hidden. This helps maintain a smooth reading experience.
  • The separators between breadcrumb items are non-clickable, meaning users won't accidentally interact with them.

Keyboard interactions

CommandDescription
TabWhen focus moves away from the breadcrumbs, it automatically shifts to the first breadcrumb item. Similarly, if focus is on a breadcrumb item, it then moves to the next breadcrumb item in the sequence.
Shift + TabMoves focus to previous breadcrumb item.
EnterSelects the breadcrumb item if it hasn't been already activated.

WAI-ARIA

AttributeValueDescriptionUser suppliedSpecifies whether the attribute is always set in the component (no) or it needs to be provided by the developer (yes)
role'navigation'Declare our group of links as navigation, used for navigating through the website/page.no
aria-labelstringProvides a label describing the type of navigation. Added as well to the sl-button, which is shown when there are some navigation links collapsed.no
aria-hiddentrueHides the separators between breadcrumb items so they are not announced by a screen reader or any other assistive technology.no
aria-currentpageApplied to the last link in the set to indicate that it represents the current page. Used to inform the assistive technology user what has been indicated via styling.no
aria-detailsstringIn collapsed version: Used to link the popover element (container with more links) with the sl-button which is an anchor (element that triggers the popover). It contains id of the popover element and is added to the sl-button (anchor) element.no
aria-expandedbooleanIn collapsed version: set to true (on the sl-button anchor element) if the popover (container with more links) is visible, false if the popover is hidden.no
Interactive example