Breadcrumbs

Breadcrumbs come in one style for navigational consistency across all touch-points.

User experience

Breadcrumbs provide a hierarchical overview of where a user is in your site. This is particularly helpful when navigation is deep or complex, and is also helpful for giving context when a user arrives on the page from another source (deep linking) rather than drilling down hierarchically. They also provide another way to quickly navigate to previous levels.

Some things to keep in mind when using breadcrumbs:

• Breadcrumbs should display the location of the current page in the site’s hierarchy – not the path through the site that the user has travelled. The browser back button is already designated this task.
• Web convention dictates breadcrumbs usually sit toward the top of the page near the primary navigation.
• Breadcrumbs should start with a link to the home page (except when truncating, see below) and end with the current page as the last item, which should not be a link.
• You do not need to use breadcrumbs if your site has only one or two levels.
• If your breadcrumb trail is becoming too long for its dedicated space, you can consider truncating it by only showing the last few links – this is especially important for small screen sizes ie mobile.

Visual design

Breadcrumbs have been designed with accessibility and functionality at the forefront. They’re intended to be as simple and understated as possible so as not to clutter the UI although (even with truncation) this can happen if page labels are too verbose or the information architecture is too deep.