Breadcrumb

<wa-breadcrumb>

Since 2.0

stable

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

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.

                
  Catalog
  Clothing
  Women's
  Shirts & Tops

<wa-breadcrumb>
  <wa-breadcrumb-item>Catalog</wa-breadcrumb-item>
  <wa-breadcrumb-item>Clothing</wa-breadcrumb-item>
  <wa-breadcrumb-item>Women's</wa-breadcrumb-item>
  <wa-breadcrumb-item>Shirts &amp; Tops</wa-breadcrumb-item>
</wa-breadcrumb>

Examples Jump to heading

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.

                
  Homepage

  Our Services

  Digital Media

  Web Design

<wa-breadcrumb>
  <wa-breadcrumb-item href="https://example.com/home">Homepage</wa-breadcrumb-item>

  <wa-breadcrumb-item href="https://example.com/home/services">Our Services</wa-breadcrumb-item>

  <wa-breadcrumb-item href="https://example.com/home/services/digital">Digital Media</wa-breadcrumb-item>

  <wa-breadcrumb-item href="https://example.com/home/services/digital/web-design">Web Design</wa-breadcrumb-item>
</wa-breadcrumb>

Start & End Decorations Jump to heading

Use the start and end slots to add presentational elements like <wa-icon> next to any breadcrumb item.

                
    Home
  
  Articles
  
    Traveling

<wa-breadcrumb>
  <wa-breadcrumb-item>
    <wa-icon slot="start" name="house"></wa-icon>
    Home
  </wa-breadcrumb-item>
  <wa-breadcrumb-item>Articles</wa-breadcrumb-item>
  <wa-breadcrumb-item>
    <wa-icon slot="end" name="tree-palm"></wa-icon>
    Traveling
  </wa-breadcrumb-item>
</wa-breadcrumb>

Custom Separators Jump to heading

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.

                
  First
  Second
  Third

  First
  Second
  Third

  /
  First
  Second
  Third

<wa-breadcrumb>
  <wa-icon slot="separator" name="angles-right" variant="solid"></wa-icon>
  <wa-breadcrumb-item>First</wa-breadcrumb-item>
  <wa-breadcrumb-item>Second</wa-breadcrumb-item>
  <wa-breadcrumb-item>Third</wa-breadcrumb-item>
</wa-breadcrumb>

<br />

<wa-breadcrumb>
  <wa-icon slot="separator" name="arrow-right" variant="solid"></wa-icon>
  <wa-breadcrumb-item>First</wa-breadcrumb-item>
  <wa-breadcrumb-item>Second</wa-breadcrumb-item>
  <wa-breadcrumb-item>Third</wa-breadcrumb-item>
</wa-breadcrumb>

<br />

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

Custom Colors Jump to heading

Breadcrumb labels match the color set on <wa-breadcrumb-item>. Content in the start, end, and separator slots can be styled using CSS parts.

                
    Home
  
  Articles
  Traveling

<style>
  .redcrumbs wa-breadcrumb-item {
    color: firebrick;
  }
  .redcrumbs wa-breadcrumb-item:last-of-type {
    color: crimson;
  }
  .redcrumbs wa-breadcrumb-item::part(separator) {
    color: pink;
  }
  .redcrumbs wa-breadcrumb-item::part(start),
  .redcrumbs wa-breadcrumb-item::part(end) {
    color: currentColor;
  }
</style>
<wa-breadcrumb class="redcrumbs">
  <wa-breadcrumb-item>
    <wa-icon slot="start" name="house" variant="solid"></wa-icon>
    Home
  </wa-breadcrumb-item>
  <wa-breadcrumb-item>Articles</wa-breadcrumb-item>
  <wa-breadcrumb-item>Traveling</wa-breadcrumb-item>
</wa-breadcrumb>

With Dropdowns Jump to heading

Dropdown menus can be placed in the default slot to provide additional options.

                
  Homepage
  
      Web Design
      Web Development
      Marketing
    
  Our Services
  Digital Media

<wa-breadcrumb>
  <wa-breadcrumb-item>Homepage</wa-breadcrumb-item>
  <wa-breadcrumb-item>
    <wa-dropdown>
      <wa-button slot="trigger" size="small" appearance="filled" pill>
        <wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
      </wa-button>
      <wa-dropdown-item type="checkbox" checked>Web Design</wa-dropdown-item>
      <wa-dropdown-item type="checkbox">Web Development</wa-dropdown-item>
      <wa-dropdown-item type="checkbox">Marketing</wa-dropdown-item>
    </wa-dropdown>
  </wa-breadcrumb-item>
  <wa-breadcrumb-item>Our Services</wa-breadcrumb-item>
  <wa-breadcrumb-item>Digital Media</wa-breadcrumb-item>
</wa-breadcrumb>

Alternatively, you can place dropdown menus in a start or end slot.

                
  Homepage
  Our Services
  Digital Media
  
    Web Design
    
      Web Design
      Web Development
      Marketing

<wa-breadcrumb>
  <wa-breadcrumb-item>Homepage</wa-breadcrumb-item>
  <wa-breadcrumb-item>Our Services</wa-breadcrumb-item>
  <wa-breadcrumb-item>Digital Media</wa-breadcrumb-item>
  <wa-breadcrumb-item>
    Web Design
    <wa-dropdown slot="end">
      <wa-button slot="trigger" size="small" appearance="filled" pill>
        <wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
      </wa-button>
      <wa-dropdown-item type="checkbox" checked>Web Design</wa-dropdown-item>
      <wa-dropdown-item type="checkbox">Web Development</wa-dropdown-item>
      <wa-dropdown-item type="checkbox">Marketing</wa-dropdown-item>
    </wa-dropdown>
  </wa-breadcrumb-item>
</wa-breadcrumb>

Slots Jump to heading

Learn more about using slots.

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

Attributes & Properties Jump to heading

Learn more about attributes and properties.

Name	Description	Reflects
`label` `label`	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. Type `string` Default `''`

CSS parts Jump to heading

Learn more about CSS parts.

Name	Description	CSS selector
`base`	The component's base wrapper.	`::part(base)`

Dependencies Jump to heading

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

<wa-icon>

Importing Jump to heading

Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN

npm

React

Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.

To manually import this component from NPM, use the following code.

import '@awesome.me/webawesome/dist/components/breadcrumb/breadcrumb.js';

To manually import this component from React, use the following code.

import WaBreadcrumb from '@awesome.me/webawesome/dist/react/breadcrumb';

Need a hand?

Report a bug

Ask for help

Getting Started

Resources

Components

Style Utilities

Layout

Patterns

Theming

Design Tokens

Terms & Policies

Web Awesome

Web Awesome Elsewhere