Breadcrumbs

Breadcrumbs help users understand where they are on a website by displaying a hierarchical path from the homepage to the current page.

Overview

Displaying breadcrumb systems builds user trust and assists in site navigation.

Design and Layout

Place breadcrumbs near the top of a web page to show the path from the homepage to the current page, running from left to right.

Titles of previous pages should be light gray and clickable, allowing users to easily return to higher-level pages. The title of the current page should be the last item, semibold, and not clickable to differentiate it.

Anatomy

Desktop/Tablet

Element	Description
1. Home	A link to the homepage
2. Parent Page	A link element representing a category with child categories. It has a hover state and, when clicked, navigates to the parent category, following the hierarchy of the navigation structure
3. Separator	A vertical line that visually separates each level in the breadcrumb; not interactive
4. Parent Page (Hover State)	Hover state of the parent page link
5. Current Page	A non-clickable item displaying the title of the current page

Mobile

The mobile breadcrumb pattern is designed for clarity and space efficiency. For navigation depths of three levels or fewer, the trail shows three links: the homepage, the immediate parent link, and the current page, ensuring users can easily return to the homepage and understand the site hierarchy. For deeper navigation, the breadcrumb shows a caret arrow icon that functions as a “Back” button, the first parent page link, and an ellipsis '...' indicating the truncated path, leading to the current page. This approach ensures a compact and contextually clear navigation on smaller screens.

Element	Description
1. Home	A link to the homepage; only shows when the navigation depth is three levels or fewer
2. Parent Page	A link element representing a category with child categories. The parent link does not show when the navigation depth is two levels
3. Back Button	Caret arrow icon indicates back behavior; shows when navigation depth is more than three levels. Takes users back one level when clicked
4. Ellipsis	Hides all mid-level navigation elements; not interactive

Dos and Don'ts

Do use breadcrumbs on interior pages that are two or more levels down in the sitemap.
Do match breadcrumbs to the page titles they represent. To maintain effective breadcrumbs, aim for titles that are concise, descriptive, and no longer than three words when possible. If a title must be longer, consider using abbreviations or truncating the text, ensuring the primary context is still clear.

Don't

Don’t use breadcrumbs on homepages, landing pages, or interior pages that are less than two levels down in the sitemap. For example, the Rural Health Care page in the image above is a landing page and should not have breadcrumbs.