Breadcrumbs

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/breadcrumb@2.0.0

Variants#


Standard#
Verified

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

Dragged#
Verified

<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-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </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-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>
Show markup

Nested#
Verified

<nav>
  <ul class="spectrum-Breadcrumbs">
    <li class="spectrum-Breadcrumbs-item">
      <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-UIIcon-FolderBreadcrumb spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-FolderBreadcrumb" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </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-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trend</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>
Show markup

Nested (root visible)#
Verified

<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-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-UIIcon-FolderBreadcrumb spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-FolderBreadcrumb" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <div class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trend</div>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>
Show markup

Multiline#
Verified

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

Multiline (dragged)#
Verified

<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-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </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-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>
Show markup

Multiline Nested#
Verified

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

Multiline Nested (root visible)#
Verified

<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-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-UIIcon-FolderBreadcrumb spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-FolderBreadcrumb" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>
Show markup

Compact#
Verified

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

Compact Nested#
Verified

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

Compact Nested (root visible)#
Verified

<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-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <button class="spectrum-ActionButton spectrum-ActionButton--quiet">
        <svg class="spectrum-Icon spectrum-UIIcon-FolderBreadcrumb spectrum-Breadcrumbs-folder" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-FolderBreadcrumb" />
        </svg>
      </button>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Trendy</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">January 2019 Assets</a>
    </li>
  </ul>
</nav>
Show markup

Title#
Deprecated

Use the multiline variant instead

<nav>
  <ul class="spectrum-Breadcrumbs spectrum-Breadcrumbs--title">
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" href="#">Home</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <a class="spectrum-Breadcrumbs-itemLink" role="link" tabindex="0">Playground</a>
      <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightSmall spectrum-Breadcrumbs-itemSeparator" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-ChevronRightSmall" />
      </svg>
    </li>
    <li class="spectrum-Breadcrumbs-item">
      <h1 class="spectrum-Heading--pageTitle">
        <a class="spectrum-Breadcrumbs-itemLink" role="link" aria-current="page">Sliders</a>
      </h1>
    </li>
  </ul>
</nav>
Show markup