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.
Variations
Spacings
States
Enabled
.enabled {
color: var(--Theme-100);
}Hover
.hover{
color: var(--Theme-100);
text-decoration-line: underline;
}Pressed
.pressed{
color: var(--Theme-Theme-Highlight);
text-decoration-line: underline;
}Visited
.visited{
color: var(--Theme-Theme-80);
}Read-Only
.read_only{
color: var(--Greys-Grey-7);
}Disabled
.disable{
color: var(--Greys-Grey-6);
}Useful links
Consult our Figma file to access our assets and inspect them in dev mode.
This component is or will be provided by the Polygon framework. See its documentation to learn more.
This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.
Usage
Use Breadcrumbs to indicate users’ positions in a navigation hierarchy and enable them to revisit previous pages as needed. Breadcrumbs are most effective for deep, multi-level navigation structures rather than shallow ones.
Location
Breadcrumbs are placed in the top left portion of the page. They sit underneath the header and navigation, but above the page title.
Path Behavior
When users click on a parent link, they are directed to that higher-level page. The breadcrumb trail updates to show the new higher-level pages, excluding the current page as a label, and removes any subcategories beyond this point.
Only include the parent paths;
Include the current step on the Breadcrumb.
Trimming
When space is limited, opt for the trimmed version to condense Breadcrumbs. Show the first and last two page links, and represent the ones in between as a ” / … / “.
Overflow content
The parent path can have the option of an overflow menu for easier navigation between child pages.
Case Studies
Building a new Seamless User Experience
Discover the exciting features
