Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    Components

    Breadcrumb

    The breadcrumb is a secondary navigation pattern that helps a user understand the hierarchy among levels and navigate back through them.

     

    Status: Developed in AEM

    Figma UI Kit

    Design Guidance

    This section outlines the visual and interaction design principles for the component. It includes details about layout, typography, color usage, and interaction patterns to ensure a cohesive and consistent user experience across the platform.

    Overview

    Breadcrumbs show users their current location relative to the information architecture and enable them to quickly move up to a parent level or previous step.

    When to Use

    Breadcrumbs are effective in products and experiences that have a large amount of content organized in a hierarchy of more than two levels. They take up little space but still provide context for the user’s place in the navigation hierarchy.

    Formatting

    Anatomy

    anatomy diagram
    1. Page link: Directs users to the parent-level page.
    2. Separator: Clearly distinguishes between each page.
    3. Current Page: the current page title. Not interactive.

    Placement

    Breadcrumbs are placed in the top left portion of the page. They sit underneath the header and navigation, but above the page title.

    breadcrumb placement diagram

    Content Guidance

    Main Elements

    Page link

    • Each page link should be short and clearly reflect the location or entity it links to.
    • Start with the highest level parent page and move deeper into the information architecture as the breadcrumb trail progresses.

    Current Page

    • The current page indicator is always the last text listed and is not an interactive link.

    Overflow content

    When space becomes limited, use an overflow menu to truncate the breadcrumbs. The first and last two page links should be shown, but the remaining breadcrumbs in between are condensed into an overflow menu. Breadcrumbs should never wrap onto a second line.

    overflow content

    For Mobile

    To optimize for smaller views on XS (extra small) grids, abbreviate the full breadcrumb trail to show the previous page link, along with a back arrow. 

    Breadcrumb mobile behavior example

    Development Guidance

    This section provides technical instructions for implementing the component. It includes coding best practices, required dependencies, and integration details to ensure the component functions as intended within the system.

    Interactions

    All the pages in the breadcrumb component should be interactive (except the current page) and link to their respective pages.

    Mouse

    • Users can trigger an item by clicking on a breadcrumb page link. The separators between page links are not interactive.

    Keyboard

    • Users can navigate between breadcrumb links by pressing Tab and Shift-Tab. Users can trigger a breadcrumb link by pressing Enter while the link has focus. For additional keyboard interactions, see the accessibility tab.

    Specifications

    View all specs on Zeroheight.

     

    Interactive States

    interactive states

    Measurements

    structure and spacing

    Structure and spacing measurements for breadcrumb | px 

    breadcrumb structure and spacing

    Recommended structure and spacing measurements for breadcrumb | px / rem

    Accessibility Guidance

    This section highlights guidelines to make the component accessible to all users, including those with disabilities. It includes information on meeting WCAG standards, keyboard navigation, and compatibility with assistive technologies.

    Keyboard Interactions

    Each page link in the breadcrumb is reached by Tab and activated by Enter. The current page, if listed in the breadcrumb, is not a link. If the breadcrumb is truncated, the ellipsis button for the overflow menu is in the tab order. 

    keyboard interactions

    The breadcrumb's links are reached by Tab and activated by Enter.

    Labeling and regions

    Keystone implements each page link as an ordered list item inside a navigation region element with the aria-label=”breadcrumb”. The ellipsis symbol should be marked up as a button element with the aria-label=”Full breadcrumb list”. The screen reader must announce collapsed or expanded state. Upon expanding the full breadcrumb list, keyboard focus should be placed on the first new breadcrumb item revealed. 

    Keystone provides the accessibility information about the breadcrumb's structure.

    labeling and regions

    Development considerations

     

    • The breadcrumb uses an html5 <nav> element an aria-label to distinguish it from other <nav> elements on the page. This could also be achieved with a “navigation” landmark on a <div>, but only if for some reason it is impossible to use a <nav>element. 

    • Each link in the breadcrumb is implemented as an ordered list item so that screen readers provide more context.

    • The visual icon separators do not need to be text (Keystone uses SVGs) and are not intended to be navigable.

    • Listen to your implementation and make sure that the chevron separator between each breadcrumb item is not announced by the screen reader. This must NOT be announced. Make sure you test in reading mode and focus mode.