Breadcrumbs

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

Usage

Code

Accessibility

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

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.

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

Item	Name	Description	Optional
1	Breadcrumbs	Combines a number of ‘breadcrumb items’ and separators	no
2	Breadcrumb item	An a href link, it can include an icon in front of the link	no
3	Separator	Visual 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

Item	Options	Description
Type	`desktop` `mobile` `home`	To indicate the sizing of the breadcrumb
Page up to and including 3	`boolean`	To indicate which pages are visible within the breadcrumb
Current	`boolean`	To indicate if the active page is visible in the end of the breadcrumb

Home item

Item	Options	Description
State	`idle` `hover` `active` `current`	Indicate the state of the home item
Show icon	`boolean`	Indicates if the icon is visible
Show label	`boolean`	Indicates if the label is visible

Page up to and including 3

Item	Options	Description
Overflow	`boolean`	Indicates if the page is visble or truncated
State	`idle` `hover` `active` `current`	Indicates if the icon is visible
Text	`value`	The title of the page

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

Item	Options	Description
Menu	`boolean`	Indicates if the menu with truncated pages is open or closed

Learning and Teaching Pupils Class Pages Year 1 Learning Materials

  <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

Name	Attribute	Type	Default	Description
`static homeUrl`	`home-url`	`string`	`'/'`	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.
`inverted`	`inverted`	`boolean \| undefined`		Set this to true to invert the color of the breadcrumbs. This should be used when the breadcrumbs are displayed on a dark background.
`static noHome`	`no-home`	`boolean`	`false`	When 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

Name	Description
`default`	The 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

Command	Description
Tab	When 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 + Tab	Moves focus to previous breadcrumb item.
Enter	Selects the breadcrumb item if it hasn't been already activated.

WAI-ARIA

Attribute	Value	Description	User 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-label`	string	Provides 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-hidden`	`true`	Hides the separators between breadcrumb items so they are not announced by a screen reader or any other assistive technology.	no
`aria-current`	`page`	Applied 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-details`	string	In 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-expanded`	boolean	In 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