• Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
  • Default
  • Express
Component status
Contribution
Current version@spectrum-css/breadcrumb@9.1.5
ReleasedSeptember 13, 2024
S2-foundations@spectrum-css/breadcrumb@10.0.0-s2-foundations.13
ReleasedSeptember 12, 2024
View guidelines
Spectrum website
View repository
GitHub
View package
npm

Variants

Standard
Contribution

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs">
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Nav Root</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trend</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>

Dragged
Contribution

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs">
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Nav Root</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item is-dragged">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trend</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>

Nested
Contribution

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs">
    <li class="spectrum-Breadcrumbs-item">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-FolderOpen" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Sub Item</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trend</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>

Nested (root visible)
Contribution

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs">
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Nav Root</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-FolderOpen" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trend</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>

Multiline
Contribution

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--multiline">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>

Multiline (dragged)
Contribution

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--multiline">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item is-dragged">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>

Multiline Nested
Contribution

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--multiline">
    <li class="spectrum-Breadcrumbs-item">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-FolderOpen" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Sub Item</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>

Multiline Nested (root visible)
Contribution

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--multiline">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-FolderOpen" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>

Compact
Contribution

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--compact">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>

Compact Nested
Contribution

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--compact">
    <li class="spectrum-Breadcrumbs-item">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-FolderOpen" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Sub Item</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>

Compact Nested (root visible)
Contribution

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--compact">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-FolderOpen" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>

Disabled
Contribution

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs">
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Nav Root</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink is-disabled" role="link" aria-disabled="true">Trend</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>
<nav>
  <ul class="spectrum-Breadcrumbs">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet" disabled>
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-ActionButton-icon spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-FolderOpen" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron100" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>

Custom Properties API

This component can be modified via its --mod-* prefixed custom properties. A list of those prefixed custom properties can be found here.

Migration Guide

New Action Button markup

Action Button requires .spectrum-ActionButton-icon class on icons nested inside of Action Button.

Remove focus-ring class

We’ve migrated away from the focus-ring class in favor of the native :focus-visible pseudo-class due to changes in browser support.