FEC Pattern Library

Breadcrumbs

The breadcrumbs component is used for navigation and to reinforce users’ awareness of their location within the site structure. The breadcrumb path text is set by where the page lives in the site’s information architecture, not by the user’s click-path.

Selecting styles

The background container color for the breadcrumbs bar should match the color assigned to the information architecture of that section of the website. You can find this color by matching it to the color of the hero slab on the section’s main landing page.

When to use

  • On any page deeper in the site architecture than the main section landing pages

When to consider something else

  • If the page is a landing page for one of the top-level menu items, breadcrumbs aren’t needed and can be omitted. These pages include:

    • /data
    • /help-for-candidates-and-committees
    • /legal-resources
    • /about
    • /press

    GitHub issues

<!-- Primary breadcrumb -->

<div class="page-header slab slab--primary">
    <ul class="breadcrumbs">
        <li class="breadcrumbs__item"><a href="#" class="breadcrumbs__link" rel="Home">Home</a></li>
        <li class="breadcrumbs__item">
            <span class="breadcrumbs__separator">›</span>
            <a href="#" class="breadcrumbs__link">Campaign finance data</a>
        </li>
        <li class="breadcrumbs__item">
            <span class="breadcrumbs__separator">›</span>
            <span>Advanced data</span>
        </li>
    </ul>
</div>

<!-- Secondary breadcrumb -->

<div class="page-header slab slab--secondary" style="margin-top: 3rem;">
    <ul class="breadcrumbs">
        <li class="breadcrumbs__item"><a href="#" class="breadcrumbs__link" rel="Home">Home</a></li>
        <li class="breadcrumbs__item">
            <span class="breadcrumbs__separator">›</span>
            <a href="#" class="breadcrumbs__link">Help for candidates and committees</a>
        </li>
        <li class="breadcrumbs__item">
            <span class="breadcrumbs__separator">›</span>
            <span>Dates and deadlines</span>
        </li>
    </ul>
</div>
 
<!-- Primary breadcrumb -->

<div class="page-header slab slab--primary">
  <ul class="breadcrumbs">
    <li class="breadcrumbs__item"><a href="#" class="breadcrumbs__link" rel="Home">Home</a></li>
    <li class="breadcrumbs__item">
      <span class="breadcrumbs__separator">›</span>
      <a href="#" class="breadcrumbs__link">Campaign finance data</a>
    </li>
    <li class="breadcrumbs__item">
      <span class="breadcrumbs__separator">›</span>
      <span>Advanced data</span>
    </li>
  </ul>
</div>


<!-- Secondary breadcrumb -->

<div class="page-header slab slab--secondary" style="margin-top: 3rem;">
  <ul class="breadcrumbs">
    <li class="breadcrumbs__item"><a href="#" class="breadcrumbs__link" rel="Home">Home</a></li>
    <li class="breadcrumbs__item">
      <span class="breadcrumbs__separator">›</span>
      <a href="#" class="breadcrumbs__link">Help for candidates and committees</a>
    </li>
    <li class="breadcrumbs__item">
      <span class="breadcrumbs__separator">›</span>
      <span>Dates and deadlines</span>
    </li>
  </ul>
</div>
 
/* No context defined. */