Indigo Design System v1.2.0

Breadcrumbs

Breadcrumbs help users understand where they are in a website.

Overview

Proper way finding builds trust with users and helps guide them through a site. You can use ides a system of breadcrumbs that allows users to more easily navigate through the sitemap.

The breadcrumb pattern is designed to ensure consistency across all USAC products.

Design and Placement

Use breadcrumbs near the top of a web page to show the path from the home page to the current page.

The title of every page on the way to the current page should be light gray and clickable, allowing users to easily return to the higher level pages when needed.

The title of the current page should be the last item of the breadcrumb navigation. To differentiate it, it should be semibold and not clickable.

Sample

In the sample below, the user is on the “Enroll Subscriber” page, which lives inside the NLAD section of the site.

html
copy-2 Copy to Clipboard 
<div class="indi-breadcrumb">
    <ul class="indi-breadcrumb__list">
        <li class="indi-breadcrumb__item">
            <a href="#"> USAC Home </a>
        </li>
        <li class="indi-breadcrumb__item">
            <a href="#"> Lifeline Program </a>
        </li>
        <li class="indi-breadcrumb__item">
            <a href="#"> NLAD </a>
        </li>
        <li class="indi-breadcrumb__item"> Enroll Subscriber </li>
    </ul>
</div>

Use Guidelines

Use When

  • You are at least two levels down in the sitemap. Breadcrumbs are for interior pages only.

Don't Use When

  • On the homepage or program landing pages.

Editorial

  • Breadcrumbs should have the same name as the title of the pages they represent. If necessary, though, you can appropriately shorten a breadcrumb if the page title is too long for a breadcrumb thread.