Components

Breadcrumb

Breadcrumbs provide secondary navigation to help users understand where they are in a website.

A breadcrumb bar (or breadcrumbs, or breadcrumb trail) is a series of links that describes the hierarchical relationship between the current page and the overall site structure. Breadcrumbs allow a user to navigate “up” instead of using the “Back” button to return to the previous page. A breadcrumb bar facilitates orientation when a user navigates to an interior page from a web search or link from another site.

Default breadcrumb
Breadcrumb with RDFa metadata
Wrapping breadcrumb
<h6>Default breadcrumb</h6>
<nav class="usa-breadcrumb" aria-label="Breadcrumbs">
  <ol class="usa-breadcrumb__list">
    <li class="usa-breadcrumb__list-item">
      <a href="#" class="usa-breadcrumb__link">
        <span>Home</span>
      </a>
    </li>
    <li class="usa-breadcrumb__list-item">
      <a href="#" class="usa-breadcrumb__link">
        <span>Federal Contracting</span>
      </a>
    </li>
    <li class="usa-breadcrumb__list-item">
      <a href="#" class="usa-breadcrumb__link">
        <span>Contracting assistance programs</span>
      </a>
    </li>
    <li class="usa-breadcrumb__list-item usa-current" aria-current="page">
      <span>Women-owned small business federal contracting program</span>
    </li>
  </ol>
</nav>

<h6>Breadcrumb with RDFa metadata</h6>
<nav class="usa-breadcrumb" aria-label="Breadcrumbs">
  <ol vocab="http://schema.org/" typeof="BreadcrumbList" class="usa-breadcrumb__list">
    <li property="itemListElement" typeof="ListItem" class="usa-breadcrumb__list-item">
      <a property="item" typeof="WebPage" href="#" class="usa-breadcrumb__link">
        <span property="name">Home</span>
      </a>
      <meta property="position" content="1">
    </li>
    <li property="itemListElement" typeof="ListItem" class="usa-breadcrumb__list-item">
      <a property="item" typeof="WebPage" href="#" class="usa-breadcrumb__link">
        <span property="name">Federal Contracting</span>
      </a>
      <meta property="position" content="2">
    </li>
    <li property="itemListElement" typeof="ListItem" class="usa-breadcrumb__list-item">
      <a property="item" typeof="WebPage" href="#" class="usa-breadcrumb__link">
        <span property="name">Contracting assistance programs</span>
      </a>
      <meta property="position" content="3">
    </li>
    <li property="itemListElement" typeof="ListItem" class="usa-breadcrumb__list-item usa-current" aria-current="page">
      <span property="name">Women-owned small business federal contracting program</span>
      <meta property="position" content="4">
    </li>
  </ol>
</nav>

<h6>Wrapping breadcrumb</h6>
<nav class="usa-breadcrumb usa-breadcrumb--wrap" aria-label="Breadcrumbs">
  <ol class="usa-breadcrumb__list">
    <li class="usa-breadcrumb__list-item">
      <a href="#" class="usa-breadcrumb__link">
        <span>Home</span>
      </a>
    </li>
    <li class="usa-breadcrumb__list-item">
      <a href="#" class="usa-breadcrumb__link">
        <span>Federal Contracting</span>
      </a>
    </li>
    <li class="usa-breadcrumb__list-item">
      <a href="#" class="usa-breadcrumb__link">
        <span>Contracting assistance programs</span>
      </a>
    </li>
    <li class="usa-breadcrumb__list-item usa-current" aria-current="page">
      <span>Women-owned small business federal contracting program</span>
    </li>
  </ol>
</nav>