When to use
Breadcrumbs are an effective pattern for experiences that involve a large amount of content spread over multiple (more than two) levels.
Therefore, it is a common pattern to use on information pages. Breadcrumbs provide context to the user by displaying their current location within the content/ information hierarchy. This hierarchy shows how the content is structured and distributed across different levels, which is not necessarily the same as the followed click path by the user.
It's important to note that breadcrumbs should complement rather than replace primary navigation menus. It serves as a convenience feature and secondary navigation tool, enabling users to determine their location within the website and offering an alternative method to navigate around pages.
Behaviour
Breadcrumbs start with a trail of links representing all previous levels. The user can click any of these levels to move up or go to a previous step. Breadcrumbs end with the current location, which is non-interactive.
On the smallest viewports, the breadcrumb limits the number of levels by only showing the previous one.
Breadcrumbs are presented starting on the second level of navigation.
Placement
Breadcrumbs are a navigation pattern that belong at the very top of the content, above the page title. This forms a clear grouping with the title and instantly communicates the current location to the user, while also allowing quick navigation to another location.
Accessibility considerations
- The breadcrumbs need to be in tab order, so you can reach each one via a keyboard (except the current page)
- Breadcrumbs should support a focus state
- From a content point of view, make sure to use very clear page titles. The page title should match with the one in the breadcrumb
- From a development point of view breadcrumbs are navigation items and should therefore be wrapped in a <nav> with an aria-label of “breadcrumb”, and marked up as an unordered list <ol>