Skip to content

Breadcrumb

<quiet-breadcrumb> stable since 1.0

Breadcrumbs offer 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

Setting the current item

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

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

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

Home Cat food Flavors Tuna
Home Cat food Flavors Tuna
Home Cat food Flavors Tuna 
<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

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

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 visually-hidden utility class to hide the label.

Products Pets Toys for cats 
<quiet-breadcrumb>
  <quiet-breadcrumb-item href="https://example.com/">
    <quiet-icon slot="start" name="home"></quiet-icon>
    <span class="visually-hidden">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

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.selection.value;
  });
</script>

Styling breadcrumbs

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

Music Artist Album Song 
<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: 9999px;
    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>
Music Artist Album Song 
<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);
      border: var(--quiet-border-style) var(--quiet-border-width) var(--quiet-neutral-stroke-soft);
      border-radius: calc(var(--quiet-border-radius) / 1.25);
      box-shadow: var(--quiet-shadow-softer);
    }

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

API

Importing

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 npm

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

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/breadcrumb/breadcrumb.js';

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

import '@quietui/quiet/dist/components/breadcrumb/breadcrumb.js';

Slots

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

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
Search this website Toggle dark mode Get the code on GitHub Follow @quietui.org on Bluesky Follow @quiet_ui on X
    No results found