• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
Component status
Contribution
Last releasedUnreleased
Current version@spectrum-css/breadcrumb@4.0.0-alpha.1
View repository
GitHub
View package
npm

Variants

Standard
Verified

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--sizeL">
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Nav Root</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trend</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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
Verified

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--sizeL">
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Nav Root</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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
Verified

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--sizeL">
    <li class="spectrum-Breadcrumbs-item">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-FolderOpen" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trend</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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)
Verified

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--sizeL">
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Nav Root</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-FolderOpen" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trend</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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
Verified

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--sizeS spectrum-Breadcrumbs--multiline">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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)
Verified

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--sizeS spectrum-Breadcrumbs--multiline">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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
Verified

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--sizeS 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-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-FolderOpen" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Sub Item</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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)
Verified

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--sizeS spectrum-Breadcrumbs--multiline">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-FolderOpen" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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
Verified

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--sizeM">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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
Verified

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--sizeM">
    <li class="spectrum-Breadcrumbs-item">
      <button class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-FolderOpen" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Sub Item</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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)
Verified

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--sizeM">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-FolderOpen" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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
Verified

Show markup
<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--sizeL">
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Nav Root</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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 spectrum-Breadcrumbs--sizeM">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Nav Root</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </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-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-icon-18-FolderOpen" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight75 spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-Chevron75" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>

No results found

Try another search term.