The BreadcrumbsItem component is a navigational item
The BreadcrumbsItem component is a navigational item that allows users to quickly ascend a page tree.
The BreadcrumbsItem component should sit at the top of the viewport. Visit the Design Hierarchy & Placement section for more information.
- Parent Link. The parent link is a clickable action that will navigate the user to the parent page.
- Current Page Label. The current page is a label displaying the current page title. It is not clickable.
Sizing & Spacing
The BreadcrumbsItem component has one standard text size. Be careful with horizontal placement, as the BreadcrumbsItem can take up a large amount of screen space displaying all the parent links.
When hovering on a Breadcrumb, the active link will change to the primary colour. Every child to the right of the hovered link will fade to help indicate the target page to the user.
Hierarchy & Placement
There should only be one BreadcrumbsItem component per page. It should sit at the top of the viewport and be easily accessible for the user. The component is a top level navigational item used to help the user navigate whole pages, rather than a subset section inside another component.