Anatomy
- Page Name: Name of the page that the user has navigated from
- Separator: Non-clickable element that separates one page from another
Usage Guidelines
Breadcrumbs are a helpful tool to supplement your website's main navigation system. They provide users with a way to understand their current location within the website's structure by displaying the path taken to reach the current page, allowing easy navigation back to previous sections.
Breadcrumbs are a helpful tool that enhances your website's main navigation system. They show users their current location within the website's structure by displaying the path taken to reach the current page. This feature allows for easy navigation back to previous sections.
When to use this component
- Use for showing a hierarchy of pages and enhance navigation
- Use breadcrumbs to show hierarchy with multiple parent pages.
When not to use this component
- Don't use breadcrumbs if the page has a single parent page. Use Link instead.
- Don't use breadcrumbs to show progress along the process of completing a task. Use Step indicator instead.
Best Practices
Provide the current page in the breadcrumbs, if the title is not present on the page.
Avoid repetition. Don't include the current page in the breadcrumbs if the page has a title.
General Component Behaviors
Placement
Place breadcrumbs at the top left corner of the screen.
Responsive Behavior
If the breakpoint reaches mobile, only link to the previous page will be displayed.
States
Previous
The previous breadcrumb uses a Link. Clicking it will navigate the user back to the stated page
Current
The current breadcrumb is non-selectable and shows the user where they currently are.