Breadcrumb

Breadcrumb is a secondary navigation pattern that identifies the page position inside a hierarchy.

install	yarn add @clayui/breadcrumb
version
use	`import Breadcrumb from '@clayui/breadcrumb';`

Table of Contents

Collapsed
Expanded

A navigation aid for your site, provide a quick way to jump back to previously viewed pages or sections.

Use <span className="breadcrumb-text-truncate"></span> inside breadcrumb links to truncate text based on a max-width.

Breadcrumb will use $breadcrumb-divider-svg-icon by default, set $breadcrumb-divider-svg-icon: none; if you wish to use the UTF-8 charset or third-party icon font.

Don’t forget to check WAI-ARIA accessibility pratices for alerts when writting your markup.

Collapsed

Snippet

<nav aria-label="Breadcrumb" class="breadcrumb-bar">
  <button
    class="breadcrumb-toggle btn btn-monospaced btn-xs"
    type="button"
    aria-expanded="false"
    aria-label="See full nested"
    title="See full nested"
  >
    <svg
      className="lexicon-icon lexicon-icon-angle-double-right"
      focusable="false"
      role="presentation"
    >
      <use href="/icons.svg#angle-double-right"></use>
    </svg>
  </button>
  <ol className="breadcrumb">
    <li className="breadcrumb-item">
      <a
        className="breadcrumb-link"
        href="#1"
        title="ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual"
      >
        <span className="breadcrumb-text-truncate"
          >ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</span
        >
      </a>
    </li>
    <li className="active breadcrumb-item">
      <span className="breadcrumb-text-truncate" title="Active">Active</span>
    </li>
  </ol>
</nav>

Expanded

Snippet

<nav aria-label="Breadcrumb" class="breadcrumb-bar">
  <button
    class="breadcrumb-toggle btn btn-monospaced btn-xs"
    type="button"
    aria-expanded="true"
    aria-label="See full nested"
    title="See full nested"
  >
    <svg
      className="lexicon-icon lexicon-icon-angle-double-left"
      focusable="false"
      role="presentation"
    >
      <use href="/icons.svg#angle-double-left"></use>
    </svg>
  </button>
  <ol className="breadcrumb">
    <li className="breadcrumb-item">
      <a className="breadcrumb-link" href="#1" title="Home">
        <span className="breadcrumb-text-truncate">Home</span>
      </a>
    </li>
    <li className="breadcrumb-item">
      <a className="breadcrumb-link" href="#1" title="Components">
        <span className="breadcrumb-text-truncate">Components</span>
      </a>
    </li>
    <li className="breadcrumb-item">
      <a
        className="breadcrumb-link"
        href="#1"
        title="Breadcrumbs and Paginations"
      >
        <span className="breadcrumb-text-truncate">
          Breadcrumbs and Paginations
        </span>
      </a>
    </li>
    <li className="breadcrumb-item">
      <a className="breadcrumb-link" href="#1" title="Page">
        <span className="breadcrumb-text-truncate">Page</span>
      </a>
    </li>
    <li className="breadcrumb-item">
      <a
        className="breadcrumb-link"
        href="#1"
        title="ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual"
      >
        <span className="breadcrumb-text-truncate">
          ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual
        </span>
      </a>
    </li>
    <li className="active breadcrumb-item">
      <span className="breadcrumb-text-truncate" title="Active"> Active </span>
    </li>
  </ol>
</nav>

Edit this page on GitHub

Contributors

Matuzalém Teles, Patrick Yeo

Last edited May 12, 2025 at 7:56:02 PM

Table of Contents

Collapsed
Expanded