Breadcrumb
A breadcrumb is a secondary navigation element that shows a user’s current location within the site’s hierarchy. It provides a clear trail of links from the homepage to the current page, helping users understand their position and easily navigate back to previous levels.
Use breadcrumbs on pages that are more than two levels deep in the site structure. They are most effective in websites with a clear, hierarchical organization. Do not use breadcrumbs to show a user's click history. They should always reflect the page's static location in the site architecture.
Visual example:
Below is the standard presentation of a breadcrumb trail on InsureKidsNow.gov. It is located at the top of the main content area, directly below the primary navigation bar.
IKN Breadcrumb
Anatomy and Visual Specifications
The breadcrumb component is a horizontal list of links that represent the path to the current page.
- Breadcrumb Trail: The complete set of links and separators that form the navigation path.
- Breadcrumb Link: Each item in the trail, except for the last one, is a clickable link to a parent page in the hierarchy.
- Separator: A special HTML character ( ›︎ ) is used to visually separate each link in the trail, indicating the hierarchical relationship; use › or › for the single right angle quotation.
- Current Page: The last item in the breadcrumb trail. It represents the title of the current page and is not a link
There are various states for the breadcrumb component.
- Default State: Breadcrumb links are styled as standard text links. Separators are a non-interactive gray color. The current page label is rendered in plain, bold text to differentiate it from the interactive links.
- Hover State: When a user hovers their mouse over a breadcrumb link, the link displays an underline to provide a clear visual indicator that it is clickable.
- Focus State:For keyboard accessibility, when a user navigates to a breadcrumb link using the Tab key, a 2px solid blue outline (#0D76AD) appears around the link.
Accessibility and Implementation Guidance
To ensure the breadcrumb component is accessible and provides a consistent experience for all users, the following implementation guidelines are mandatory.
- Use Proper Semantic Structure. The entire breadcrumb trail must be wrapped in a < nav > element with an aria-label="Breadcrumb"attribute. This identifies it as a navigation landmark for screen reader users. The trail itself should be structured as an ordered list (< ol >) because it represents a sequential path.
- Distinguish Links from the Current Page. Every item in the breadcrumb trail must be a link (< a >) except for the last one. The final item represents the user's current page and should be plain text. To communicate this to screen reader users, the last item must include the aria-current="page" attribute.
- Provide Clear and Concise Labels. The text for each breadcrumb link should match the title of the page it links to. Avoid long page titles that could cause the breadcrumb trail to wrap excessively on smaller screens.
- Ensure Consistent Placement. The breadcrumb component must always be placed in a consistent location on the page. On InsureKidsNow.gov, it should appear at the top of the main content area, above the page title (< h1 >).
- Handle Responsive Behavior Gracefully. On smaller viewports, the breadcrumb trail should wrap onto multiple lines as needed. Do not truncate the breadcrumb or hide it on mobile devices, as it remains a valuable orientation tool.
Additional Specifications
For any additional information about specifications, guidelines, accessibility and usage, please refer to the Breadcrumb component on the USWDS website:
USWDS - Breadcrumb