Version
has been released! Read the upgrade guide

Breadcrumbs

The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.

The Breadcrumbs component is a navigational item

Overview

The Breadcrumbs component allows users to quickly ascend a page tree.

1Usage

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

2Anatomy

  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.

3Sizing & 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.

4States

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.

5Hierarchy & 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.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright