Breadcrumb

<quiet-breadcrumb>

stable

since 1.0

Offers a trail of links that correspond to an app or website's hierarchy, making navigation more predictable for users.

Breadcrumbs follow the ARIA APG breadcrumb pattern for accessibility. The breadcrumb is labeled for assistive devices and breadcrumb items are announced as links. The breadcrumb corresponding to the current page is styled differently, but remains a functional link. Separators are presentational and will not be announced by screen readers.

              
                 Home 

                 Services 

                 Adoption 

                 Available Cats

<quiet-breadcrumb>
  <quiet-breadcrumb-item href="https://example.com/">
    Home
  </quiet-breadcrumb-item>

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

  <quiet-breadcrumb-item href="https://example.com/services/adoption/">
    Adoption
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item current href="">
    Available Cats
  </quiet-breadcrumb-item>
</quiet-breadcrumb>

Examples Jump to heading

Setting the current item Jump to heading

Add the current attribute to the breadcrumb item that represents the current page. An empty href can be used on current items instead of the full URL. The breadcrumb will be drawn differently, but the link will still be active for optimal accessibility.

              
                 Home 

                 Support 

                 FAQ 

                 What do I feed my cat?

<quiet-breadcrumb>
  <quiet-breadcrumb-item href="https://example.com/">
    Home
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/support/">
    Support
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/support/faq/">
    FAQ
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item current href="">
    What do I feed my cat?
  </quiet-breadcrumb-item>
</quiet-breadcrumb>

Changing the separator Jump to heading

Use the separator slot to change the separator between breadcrumb items. Text and icons work well here.

              
                  Home
                  /
                
                  Products
                  /
                
                  Pets
                  /
                
                  Toys for cats
                  /
                
                  Home
                  
                  Products
                  
                  Pets
                  
                  Toys for cats

<quiet-breadcrumb>
  <quiet-breadcrumb-item href="https://example.com/">
    Home
    <span slot="separator">/</span>
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/products/">
    Products
    <span slot="separator">/</span>
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/products/pets/">
    Pets
    <span slot="separator">/</span>
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item current href="">
    Toys for cats
    <span slot="separator">/</span>
  </quiet-breadcrumb-item>
</quiet-breadcrumb>

<br>

<quiet-breadcrumb>
  <quiet-breadcrumb-item href="https://example.com/">
    Home
    <quiet-icon slot="separator" name="fish-bone"></quiet-icon>
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/products/">
    Products
    <quiet-icon slot="separator" name="fish-bone"></quiet-icon>
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/products/pets/">
    Pets
    <quiet-icon slot="separator" name="fish-bone"></quiet-icon>
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item current href="">
    Toys for cats
    <quiet-icon slot="separator" name="fish-bone"></quiet-icon>
  </quiet-breadcrumb-item>
</quiet-breadcrumb>

Changing the size Jump to heading

Breadcrumbs are sized relative to the current font size. To change their size, apply font-size to the breadcrumb or an ancestor element.

<quiet-breadcrumb style="font-size: .875rem;">
  <quiet-breadcrumb-item href="https://example.com/">
    Home
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/food/">
    Cat food
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/food/flavors/">
    Flavors
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item current href="">
    Tuna
  </quiet-breadcrumb-item>
</quiet-breadcrumb>

<br>

<quiet-breadcrumb style="font-size: 1rem;">
  <quiet-breadcrumb-item href="https://example.com/">
    Home
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/food/">
    Cat food
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/food/flavors/">
    Flavors
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item current href="">
    Tuna
  </quiet-breadcrumb-item>
</quiet-breadcrumb>

<br>

<quiet-breadcrumb style="font-size: 1.25rem;">
  <quiet-breadcrumb-item href="https://example.com/">
    Home
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/food/">
    Cat food
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/food/flavors/">
    Flavors
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item current href="">
    Tuna
  </quiet-breadcrumb-item>
</quiet-breadcrumb>

Start & end icons Jump to heading

Use the start and end slots to add icons and other presentational elements to various breadcrumb items.

              
                  Home
                
                 Products 

                 Pets 

                  Toys for cats

<quiet-breadcrumb>
  <quiet-breadcrumb-item href="https://example.com/">
    <quiet-icon slot="start" name="home"></quiet-icon>
    Home
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/products/">
    Products
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/products/pets/">
    Pets
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item current href="">
    Toys for cats
    <quiet-icon slot="end" name="cat"></quiet-icon>
  </quiet-breadcrumb-item>
</quiet-breadcrumb>

Icon-only items Jump to heading

To create icon-only breadcrumb item, slot in an icon and a visually hidden label for assistive devices. If you're using Quiet Restyle, you can use the quiet-vh utility class to visually hide the label.

              
                  Home
                
                 Products 

                 Pets 

                 Toys for cats

<quiet-breadcrumb>
  <quiet-breadcrumb-item href="https://example.com/">
    <quiet-icon slot="start" name="home"></quiet-icon>
    <span class="quiet-vh">Home</span>
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/products/">
    Products
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/products/pets/">
    Pets
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item current href="">
    Toys for cats
  </quiet-breadcrumb-item>
</quiet-breadcrumb>

With collapsed items Jump to heading

You can create a collapsed breadcrumb item by adding a dropdown with additional options. In this case, omit the href attribute so the dropdown won't be wrapped with a link.

              
                 Home 

                 Pets 

                    Birds
                    Cats
                    Dogs
                    All animals
                  
                 Favorites

<quiet-breadcrumb id="breadcrumb__collapsed">
  <quiet-breadcrumb-item href="https://example.com/">
    Home
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/pets/">
    Pets
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item>
    <quiet-dropdown style="font-size: 1rem;">
      <quiet-button slot="trigger" appearance="text" icon-label="More pages" size="sm">
        <quiet-icon name="dots"></quiet-icon>
      </quiet-button>
      <quiet-dropdown-item value="https://example.com/pets/birds">Birds</quiet-dropdown-item>
      <quiet-dropdown-item value="https://example.com/pets/cats">Cats</quiet-dropdown-item>
      <quiet-dropdown-item value="https://example.com/pets/dogs">Dogs</quiet-dropdown-item>
      <quiet-dropdown-item value="https://example.com/pets/all">All animals</quiet-dropdown-item>
    </quiet-dropdown>
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item current href="">
    Favorites
  </quiet-breadcrumb-item>
</quiet-breadcrumb>

<script>
  const breadcrumb = document.getElementById('breadcrumb__collapsed');

  breadcrumb.addEventListener('quiet-select', event => {
    location.href = event.detail.item.value;
  });
</script>

Styling breadcrumbs Jump to heading

Breadcrumbs come with a simple, minimal appearance. Feel free to customize them with your own styles.

<quiet-breadcrumb class="breadcrumb__bar">
  <quiet-breadcrumb-item href="https://example.com/">
    <quiet-icon slot="start" name="music"></quiet-icon>
    Music
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/products/">
    Artist
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/products/pets/">
    Album
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item current href="">
    Song
  </quiet-breadcrumb-item>
</quiet-breadcrumb>

<style>
  .breadcrumb__bar {
    background-color: var(--quiet-neutral-fill-softer);
    border-radius: var(--quiet-border-radius-pill);
    padding-inline: 1em;
    padding-block: .5em;

    quiet-breadcrumb-item::part(link) {
      color: var(--quiet-text-muted);
    }
     
    quiet-breadcrumb-item[current]::part(link) {
      color: var(--quiet-text-body);
    }

    quiet-breadcrumb-item:not([current])::part(link):hover {
      text-decoration: underline;
      text-underline-offset: 0.125em;
    }
  }
</style>

<quiet-breadcrumb class="breadcrumb__borders">
  <quiet-breadcrumb-item href="https://example.com/">
    <quiet-icon slot="start" name="music"></quiet-icon>
    Music
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/products/">
    Artist
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item href="https://example.com/products/pets/">
    Album
  </quiet-breadcrumb-item>

  <quiet-breadcrumb-item current href="">
    Song
  </quiet-breadcrumb-item>
</quiet-breadcrumb>

<style>
  .breadcrumb__borders {
    quiet-breadcrumb-item::part(label) {
      padding: .33em .5em;
    }

    quiet-breadcrumb-item:not([current])::part(label) {
      background-color: var(--quiet-paper-color);
      border: var(--quiet-border-style) var(--quiet-border-width) var(--quiet-neutral-stroke-soft);
      border-radius: var(--quiet-border-radius-md);
      box-shadow: var(--quiet-shadow-softer);
    }

    quiet-breadcrumb-item::part(separator) {
      display: none;
    }
  }
</style>

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

Self-hosted

To manually import <quiet-breadcrumb> from the CDN, use the following code.

import 'https://cdn.quietui.org/v2.0.0/components/breadcrumb/breadcrumb.js';

To manually import <quiet-breadcrumb> from a self-hosted distribution, use the following code. Remember to replace /path/to/quiet with the appropriate local path.

import '/path/to/quiet/components/breadcrumb/breadcrumb.js';

Slots Jump to heading

Breadcrumb supports the following slots. Learn more about using slots

Name	Description
(default)	The default slot containing one or more breadcrumb items.

CSS custom properties Jump to heading

Breadcrumb supports the following CSS custom properties. You can style them like any other CSS property. Learn more about CSS custom properties

Name	Description	Default
`--item-spacing`	The amount of spacing to use between breadcrumb items.	`0.5em`

Breadcrumb

Examples Jump to heading #

Setting the current item Jump to heading #

Changing the separator Jump to heading #

Changing the size Jump to heading #

Start & end icons Jump to heading #

Icon-only items Jump to heading #

With collapsed items Jump to heading #

Styling breadcrumbs Jump to heading #

API Jump to heading #

Importing Jump to heading #

Slots Jump to heading #

CSS custom properties Jump to heading #