Breadcrumbs are a navigational component used in user interfaces to improve the user experience by providing a clear path to previous steps or navigational levels. They typically display the user's current location within the hierarchical structure of an application, allowing for easy navigation and improved orientation.
- 1.Unvisited item: these are links that represent the navigational path taken by the user but are not the current page
- 2.Divider: a visual element that complements the label, providing additional meaning or enhancing recognition.
- 3.Visited item: displays the textual action that the button is going to carry out.
When there are more than four items in the breadcrumbs, the component will collapse the items in a dropdown menu to avoid overloading the interface. Users can click on the dropdown to view the hidden items and navigate to the desired level.
Although this can be configurable, we highly encourage our users to stick with the collapsing at five or more items. This was not a random decision, we carefully selected it to ensure the component does not overload the interface and remains an effective navigational aid.
Depending on the amount of available space, the collapsed breadcrumbs can be synthesized more by removing the root element and displaying only the collapsed dropdown and the current page.
Be mindful of your user's cognitive load and collapse breadcrumbs appropriately.
- Use breadcrumbs to support secondary navigation in hierarchical structures, helping users understand where they are and how they got there.
- Always include the full path from the homepage or root section to the current page to provide meaningful context.
- Display only one breadcrumb trail per page to avoid confusion and maintain a clear navigation hierarchy.
- Make all breadcrumb items navigable except for the last one, which should reflect the current page and remain non-interactive.
- Keep labels concise and consistent with the destination page titles to avoid ambiguity.
- Place breadcrumbs at the top of the page, just below the main navigation or header, to follow common UI patterns and user expectations.
- Avoid using breadcrumbs as a replacement for primary navigation—they are meant to complement it, not replace menus or sidebars.
- When truncating breadcrumbs due to space constraints, prioritize showing the first and last items while collapsing the middle items with a clear overflow mechanism.