Official website

of the Commonwealth of Pennsylvania

Components

Breadcrumb

Breadcrumbs show the path from the homepage to the current page. They help users understand where they are in the website’s structure.

Overview

Breadcrumbs are a type of secondary navigation. They show the path from the homepage to the current page. They help users see where they are in the website’s structure.

They do not show the steps a user took to get there — only where the page fits in the overall site hierarchy.

Visually, they are located at the top left of a page, right above the page title.

Each breadcrumb item is the name of a parent page and links back to that page. On mobile, breadcrumbs are shortened to save space.

Usage

When to use

Show breadcrumbs on all pages (except the homepage).

When not to use

  • Don’t use breadcrumbs to replace the main navigation.
  • Don't show breadcrumbs on the homepage.

Accessibility

Breadcrumb links must clearly describe the link destination. Do not use vague labels.

Mouse

  • Users can click on a breadcrumb’s link to go to that specific page.
  • 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.

Related components

We want to hear from you

This is a pre-release version of Keystone Design System. If you're a beta tester, we want your bug reports, questions, and feedback.

 

Complete our form to share your thoughts—just log in with your PA.gov email. We'll review and consider every response.