Breadcrumbs
Breadcrumbs are a form of secondary navigation that display a series of links, showing users their current location within a website or application and allowing them to easily navigate back to previous or higher-level pages in the hierarchy.
- Overview
- Specs
- Guidelines
Component
Breadcrumbs are a type of secondary navigation that provide a visual trail of links to help users understand their current location within a website or application. They show the path taken to arrive at the current page and allow users to easily navigate back to previous or higher-level pages in the navigation hierarchy. This feature enhances usability by clarifying the structure of the site and reducing the number of steps needed to return to previously visited pages.
- 1: Parent page: Directs users to the parent-level page;
- 2: Separator: Clearly distinguishes between each page;
- 3: Drop-down: Contains different child pages;
- 4: First link in the hierarchy: First child page in the hierarchy.
Used for:
Deep navigation hierarchies:
Breadcrumbs help users understand the structure and easily navigate back to higher-level categories.
Multi-Step processes:
Breadcrumbs allow users to see the steps they have completed and the ones remaining, providing a clear process overview.
Don’t use for:
Shallow navigation hierarchies that are one or two levels deep:
In this case, Breadcrumbs offer no additional value since the structure is straightforward and easy to navigate.
Simple websites or areas:
In this case, Breadcrumbs add unnecessary complexity without providing significant navigational benefits.
Demo
Access the Figma file and inspect the element using Dev Mode.
