Breadcrumb
Examples
Basic Breadcrumb
Breadcrumb Links
Custom Separators
Prefixes
Suffixes
With Dropdowns
Component Props
Slots
CSS Parts
Dependencies

Since Shoelace 2.0

Code stable

Pattern stable

Figma ready

Breadcrumb

sl-breadcrumb

Breadcrumbs provide a group of links so users can easily navigate a website’s hierarchy.

Examples

Breadcrumbs are usually placed before a page’s main content with the current page shown last to indicate the user’s position in the navigation.

Projects

Accounting

Finance integration

Tasks

<sl-breadcrumb>
  <sl-breadcrumb-item>Projects</sl-breadcrumb-item>
  <sl-breadcrumb-item>Accounting</sl-breadcrumb-item>
  <sl-breadcrumb-item>Finance integration</sl-breadcrumb-item>
  <sl-breadcrumb-item>Tasks</sl-breadcrumb-item>
</sl-breadcrumb>

sl-breadcrumb
  sl-breadcrumb-item Projects
  sl-breadcrumb-item Accounting
  sl-breadcrumb-item Finance integration
  sl-breadcrumb-item Tasks

By default, breadcrumb items are rendered as buttons so you can use them to navigate single-page applications. In this case, you’ll need to add event listeners to handle clicks.

For websites, you’ll probably want to use links instead. You can make any breadcrumb item a link by applying an href attribute to it. Now, when the user activates it, they’ll be taken to the corresponding page — no event listeners required.

Cash account

Checking

Statements

Downloads

<sl-breadcrumb>
  <sl-breadcrumb-item href="https://example.com/cash">Cash account</sl-breadcrumb-item>

  <sl-breadcrumb-item href="https://example.com/cash/checking">Checking</sl-breadcrumb-item>

  <sl-breadcrumb-item href="https://example.com/cash/checking/statements">Statements</sl-breadcrumb-item>

  <sl-breadcrumb-item href="https://example.com/cash/checking/statements/downloads">Downloads</sl-breadcrumb-item>
</sl-breadcrumb>

sl-breadcrumb
  sl-breadcrumb-item href="https://example.com/cash" Cash account
  sl-breadcrumb-item href="https://example.com/cash/checking" Checking
  sl-breadcrumb-item href="https://example.com/cash/checking/statements" Statements
  sl-breadcrumb-item href="https://example.com/cash/checking/statements/downloads" Downloads

Custom Separators

Use the separator slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.

Note: Custom separators are not a standard pattern in our Design System, and there is no Figma component for this option. Please check with the design team before using this option.

First

Second

Third

First

Second

Third

•

First

Second

Third

<sl-breadcrumb>
  <sl-icon library="fa" name="arrow-right" slot="separator"></sl-icon>
  <sl-breadcrumb-item>First</sl-breadcrumb-item>
  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
  <sl-breadcrumb-item>Third</sl-breadcrumb-item>
</sl-breadcrumb>

<br />

<sl-breadcrumb>
  <sl-icon library="fa" name="chevron-right" slot="separator"></sl-icon>
  <sl-breadcrumb-item>First</sl-breadcrumb-item>
  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
  <sl-breadcrumb-item>Third</sl-breadcrumb-item>
</sl-breadcrumb>

<br />

<sl-breadcrumb>
  <span slot="separator">•</span>
  <sl-breadcrumb-item>First</sl-breadcrumb-item>
  <sl-breadcrumb-item>Second</sl-breadcrumb-item>
  <sl-breadcrumb-item>Third</sl-breadcrumb-item>
</sl-breadcrumb>

sl-breadcrumb
  sl-icon library="fa" name="arrow-right" slot="separator"
  sl-breadcrumb-item First
  sl-breadcrumb-item Second
  sl-breadcrumb-item Third
br
sl-breadcrumb
  sl-icon library="fa" name="chevron-right" slot="separator"
  sl-breadcrumb-item First
  sl-breadcrumb-item Second
  sl-breadcrumb-item Third
br
sl-breadcrumb
  span slot="separator" •
  sl-breadcrumb-item First
  sl-breadcrumb-item Second
  sl-breadcrumb-item Third

Prefixes

Use the prefix slot to add content before any breadcrumb item.

Note: The design system pattern for prefixes currently only allows a back arrow (arrow-left) to be shown to the left of the first breadcrumb item. The Figma component is locked to this option. Please check with the design team before using a different prefix.

Cap table requests

New request

<sl-breadcrumb>
  <sl-breadcrumb-item>
    <sl-icon slot="prefix" library="fa" name="fas-arrow-left"></sl-icon>
    Cap table requests
  </sl-breadcrumb-item>
  <sl-breadcrumb-item>New request</sl-breadcrumb-item>
</sl-breadcrumb>

sl-breadcrumb
  sl-breadcrumb-item
    sl-icon slot="prefix" library="fa" name="fas-arrow-left"
    | Cap table requests
  sl-breadcrumb-item New request

Suffixes

Use the suffix slot to add content after any breadcrumb item.

Note: There’s currently no use case for displaying suffix icons in breadcrumbs in our apps, and there is no Figma component for this option. Please check with the design team before using this option.

Documents

Policies

Security

<sl-breadcrumb>
  <sl-breadcrumb-item>Documents</sl-breadcrumb-item>
  <sl-breadcrumb-item>Policies</sl-breadcrumb-item>
  <sl-breadcrumb-item>
    Security
    <sl-icon slot="suffix" name="shield-check"></sl-icon>
  </sl-breadcrumb-item>
</sl-breadcrumb>

sl-breadcrumb
  sl-breadcrumb-item Documents
  sl-breadcrumb-item Policies
  sl-breadcrumb-item
    | Security
    sl-icon slot="suffix" name="shield-check"

With Dropdowns

Dropdown menus can be placed in a prefix or suffix slot to provide additional options.

Note: There’s currently no use case for displaying dropdowns in breadcrumbs in our apps, and there is no Figma component for this option. Please check with the design team before using this option.

Homepage

Our Services

Digital Media

Web Design

Web Development

Marketing

<sl-breadcrumb>
  <sl-breadcrumb-item>Homepage</sl-breadcrumb-item>
  <sl-breadcrumb-item>Our Services</sl-breadcrumb-item>
  <sl-breadcrumb-item>Digital Media</sl-breadcrumb-item>
  <sl-breadcrumb-item>
    Web Design
    <sl-dropdown slot="suffix">
      <sl-icon-button slot="trigger" library="fa" label="More options" name="ellipsis"></sl-icon-button>
      <sl-menu>
        <sl-menu-item type="checkbox" checked>Web Design</sl-menu-item>
        <sl-menu-item type="checkbox">Web Development</sl-menu-item>
        <sl-menu-item type="checkbox">Marketing</sl-menu-item>
      </sl-menu>
    </sl-dropdown>
  </sl-breadcrumb-item>
</sl-breadcrumb>

sl-breadcrumb
  sl-breadcrumb-item Homepage
  sl-breadcrumb-item Our Services
  sl-breadcrumb-item Digital Media
  sl-breadcrumb-item
    | Web Design
    sl-dropdown slot="suffix"
      sl-icon-button slot="trigger" library="fa" label="More options" name="ellipsis"
      sl-menu
        sl-menu-item type="checkbox" checked=true Web Design
        sl-menu-item type="checkbox" Web Development
        sl-menu-item type="checkbox" Marketing

Component Props

Property Default Details

Property	Default	Details
`label`	`''`	`string` The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by screen readers and other assistive devices to provide more context for users.
`updateComplete`		A read-only promise that resolves when the component has finished updating.

label

''

string

The label to use for the breadcrumb control. This will not be shown on the screen, but it will be announced by screen readers and other assistive devices to provide more context for users.

updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Slots

Name	Details
(default)	One or more breadcrumb items to display.
`separator`	The separator to use between breadcrumb items. Works best with `<sl-icon>`.

Learn more about using slots.

CSS Parts

Name	Description
`base`	The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

<sl-icon>

Examples

Basic Breadcrumb

Breadcrumb Links

Custom Separators

Prefixes

Suffixes

With Dropdowns

Component Props

Slots

CSS Parts

Dependencies