Breadcrumb
Definition
A breadcrumb is a hierarchical trail of links that helps users orient themselves within a website or application. Breadcrumbs support wayfinding, appear at the top of a page, and follow. They are not an indication of all the pages a user has visited.
Usage
Breadcrumbs are helpful for navigating and understanding the structure of a website or application. They also help strengthen SEO by improving internal linking and site crawlability.
If your site or application is only one or two levels deep, you may not need breadcrumbs.
Best Practices
Placement
- Place breadcrumbs beneath main navigation
- Do not exceed half the page width, except on mobile, where full page width is acceptable and likely ideal
- If more space is needed, collapse breadcrumbs with clickable ellipses so that users can see the entire path if they choose. Do not make the ellipses the first item, but place it as close as possible to the first item.
- The current page a user is on should always be the last item but should not be clickable.
Font and Color
- To ensure easy readability, avoid lengthy or crowded text
- Avoid using flashy or contrasting colors. Breadcrumbs are not the primary source of navigation and should not distract users’ attention.
- To ensure screen reader compatibility, maintain background and text color contrast that meet WCAG 2.2 AA compatibility.
- Always use the same typeface as the body copy.
- Right-size breadcrumb font size by making sure that it meets the accessibility standard but is also smaller than body copy.
Example
