Skip to main content
Official website. How you know

Official websites use .gov

A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS

A lock or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

Digital Design System

Breadcrumb

Breadcrumbs help users understand where they are on a website. They also let users quickly navigate to the previous page without using the menu.

Overview

We use a single breadcrumb that lets the user navigate to the previous page in the site structure. We never use multiple breadcrumbs. The breadcrumb always includes the left-facing arrow.

Default

Blue less than character, being used as a left-facing arrow, is followed by underlined link text Breadcrumb

Hover

Dark blue version of the default breadcrumb component

Focus

A dashed line around the dark blue breadcrumb component indicates a focused state.

Usage context

When to use

Use breadcrumbs in any situation where navigating back and forth through content would be useful, and where the relationship between parent and child pages is clearly defined. For example:

  • Informational pages about specific topics. Include a breadcrumb to the page about the broader topic. (For example, "Parking ticket payment plans" has a breadcrumb back to "Parking or camera tickets").
  • Individual entries in a database or resource library. Include a breadcrumb to the library itself. (For example, "Yoga in the park" has a breadcrumb back to "Events").

When to use something else

Avoid breadcrumbs when content is not hierarchically organized, or when navigating back and forth would be confusing or redundant, such as:

  • Landing pages with no parent page (such as an agency site homepage)
  • Pages represented by an item in the main menu (the breadcrumb is redundant with the main menu)
  • Simple sites with 10 or fewer pages
  • Step-by-step processes that a user accomplishes linearly
  • Sites with complex structures where the same content may appear in multiple paths

Usage guidelines

Place breadcrumbs at the very top of the page below the navigation menu. Breadcrumbs should always be above the H1 heading.

Breadcrumb Services above NYC parking or camera tickets H1 and below the nyc.gov mobile navigation

Services breadcrumb incorrectly placed after the page’s H1

Never wrap breadcrumbs onto two lines.

Landscape view of a breadcrumb in 2 lines- the word facilities is under the words Activities and mobile view of the same incorrect line break of Activities and facilities breadcrumb

Don’t include breadcrumbs on your homepage or any page represented by a main menu item. The breadcrumb should never lead to the homepage. If the page has no clear parent page, do not use a breadcrumb.

YC.gov Department of Finance desktop view of the Property page, with homepage as the breadcrumb

Breadcrumb

The breadcrumb component can be utilized by using the following structure:

  • nav.breadcrumb[aria-label="Breadcrumb"]
    • ol.breadcrumb__list
      • li.breadcrumb__item
        • a

Even though the NYC Design System standard is to only display the link to the immediate parent, the list structure and attributes are for accessibility and SEO best practices.

This code is for reference only. The library is currently in beta. Check back for future releases.
<nav id="breadcrumb" class="breadcrumb" aria-label="Breadcrumb" rule="navigation">
  <ol class="breadcrumb__list" itemscope itemtype="http://schema.org/BreadcrumbList">
    <li class="breadcrumb__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <a class="breadcrumb__item-link" href="/main/services">Default</a>
    </li>
  </ol>
</nav>