Breadcrumbs
Supplemental navigation that indicates the user’s location in a site or app.
Breadcrumbs are a supplemental navigation element that help users with wayfinding. They indicate the user’s current location within a website or app and streamline navigation across multiple layers of pages, folders, or files.
Also known as: Breadcrumb trail, cookie crumb trail.
Anatomy
A. Link (required): Standalone link component with an underline.
B. Separator (required): Character appearing between each link, either a forward slash: (‘/’) or svg: (‘>’).
C. Current page (required): Non-interactive text representing the user’s current location.
Usage
| When to use | When not to use |
|---|---|
| To help users understand their current location within the information hierarchy of an app or site. | For linear web pages without multiple levels of page hierarchy. |
| As a secondary form of navigation. | In place of a site’s main navigation. |
Best practices
- Use breadcrumbs consistently across your site. If you use them on one page, use them on all pages where they’re relevant.
- Always include the user’s current page as the last item. The current page isn’t a link and should appear different from the other breadcrumb items, which are active links.
Do Use breadcrumbs to indicate the user’s current location.
Don't Use breadcrumbs to show progress through a form.
Do Use breadcrumbs for sites with hierarchical structures, such as blogs.
Don't Use breadcrumbs for sites with fewer than three levels of hierarchy.
Breadcrumb trails
There are generally three strategies for generating breadcrumb trails: location-based, path-based, and attribute-based breadcrumbs. These include location-based, path-based, and attribute-based breadcrumbs.
Following design recommendations from the Nielsen Norman Group, we suggest primarily using the location-based strategy. However, there may be exceptions where path- and attribute-based breadcrumbs fit your use case.
Location-based breadcrumb trails (recommended)
Location-based breadcrumbs show the user’s location within a site’s hierarchy. They are the suggested form of breadcrumbs because they provide a clear route that is not repetitive or lengthy, which can happen with other types of breadcrumbs.
- Always start with the home page or base level of hierarchy. This provides a clear starting point and helps users understand the overall hierarchical structure.
Path-based breadcrumbs (alternative strategy)
Path-based trails show the pages a user visited to get to their current page. This strategy shows the specific path a user took but might not reflect site hierarchy.
- Include every page a user has visited to ensure the path is accurate and consistent.
Attribute-based breadcrumbs (alternative strategy)
Attribute-based trails show the attributes or characteristics of the items on a page. This works best when page contents can be categorized in multiple ways, not just within a single hierarchical structure, such as an e-commerce site.
- Identify both the attribute type and specific attribute in the breadcrumb trail.
Content
- Write all content in sentence case, except for acronyms or proper nouns.
- Don’t use punctuation, except for colons in attribute-based trails.
- Ensure labels match page titles to enhance the user’s understanding of the site’s information hierarchy.
- Follow all best practices and guidelines implementing links. Reference Link for more information.
Platform considerations
Mobile
Breadcrumbs are not common in native mobile apps. Instead, consider using a back-facing arrow UI button to let users navigate back one level in site hierarchy.
- Reference Link for more information on “Back to” links.
Web
Breadcrumbs are commonly used on websites with many pages that are organized hierarchically.
- Place breadcrumbs at the top of a page between the navigation bar and page title.
- Don’t use breadcrumbs on sites where every page is accessible from a global navigation bar.
