The BreadcrumbsItem component is a navigational item


The BreadcrumbsItem component is a navigational item that allows users to quickly ascend a page tree.

The Breadcrumb Component.ShipsReports22nd April 2019Home


The BreadcrumbsItem component should sit at the top of the viewport. Visit the Design Hierarchy & Placement section for more information.


ShipsReports22nd April 2019HomeAnatomy of the Breadcrumb component.
  1. Parent Link. The parent link is a clickable action that will navigate the user to the parent page.
  2. 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.


ShipsReports22nd April 2019HomeShipsReports22nd April 2019HomeThe Breadcrumb States.

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.