Breadcrumbs
Breadcrumbs are navigational links that help users navigate within a website's hierarchy. Breadcrumbs show users their current location and enable them to easily move up to a parent level or previous step.
Overview
Anatomy
- Page link: Directs users to the parent-level page
- Separator: Clearly distinguishes between each page
- Current page: Displays current position in navigation flow
When to use
- When site structure/hierarchy is complex and has multiple branching points
- To allow users easy backwards navigation
When not to use
- As a form of main navigation
- On mobile websites
Best practices
Display the user's current location.
Breadcrumbs should display the current location in the site’s hierarchical structure, not the session history.
Show a single pathway.
For polyhierarchical sites, breadcrumbs should show a single pathway in the site’s polyhierarchy.
Include the current page.
Include the current page as the last item in the breadcrumb trail.
Don't link the current page.
In the breadcrumb trail, the breadcrumb corresponding to the current page should not be a link.
Formatting
Alignment
Breadcrumbs should be aligned with the right most side along with the page content title and secondary navigation.
Placement
Breadcrumbs are placed in the top left portion of the page. They sit underneath the header and navigation, but above the page title.
Content
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.
Overflow content
When space becomes limited, use an overflow menu to truncate the breadcrumbs. Breadcrumbs should never wrap onto a second line.
References
Breadcrumbs: 11 Design Guidelines for Desktop and Mobile, Nielsen Norman Group
U.S. Web Design System (USWDS)