Skip to content Skip to main navigation Report an accessibility issue

Bread Crumbs

Documentation

Usage: Create a helper that helps define the current page’s hierarchy in your site’s architecture.

SPECIAL NOTES:

If you are using the WordPress theme, please visit the extending page for notes on the appropriate plugins.

Example

Code

HTML

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Rocky-top</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Rocky-top</a></li>
    <li class="breadcrumb-item active" aria-current="page">Happiness</li>
  </ol>
</nav>
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Rocky-top</a></li>
    <li class="breadcrumb-item"><a href="#">Happiness</a></li>
    <li class="breadcrumb-item active" aria-current="page">Still</li>
  </ol>
</nav>