NICE Design System home

Breadcrumbs

When to use breadcrumbs

Use the breadcrumbs component when you need to help users understand and move between the multiple levels of a website. Levels are created when pages sit underneath other pages in the site structure. For example Homepage > About > Who we are.

When not to use breadcrumbs

Do not use the breadcrumbs component on websites with a flat structure - no pages sit underneath other pages - or to show progress through a linear journey or transaction.

If using other navigational elements on the page, such as a sidebar, consider whether your users need the additional support of breadcrumbs.

How to use breadcrumbs

Example: breadcrumbs

React
HTML

_10
<Breadcrumbs>
_10
<Breadcrumb to="https://www.nice.org.uk/">Home</Breadcrumb>
_10
<Breadcrumb to="https://www.nice.org.uk/guidance">NICE guidance</Breadcrumb>
_10
<Breadcrumb to="/">Published</Breadcrumb>
_10
</Breadcrumbs>

The breadcrumb should start with your 'home' page and end with the parent section of the current page. You don't need to show the current page in the breadcrumb because this information is in the main page heading (H1).

Always place breadcrumbs at the top of a page.

If the entire breadcrumb trail doesn't fit the screen size, it can wrap onto two lines.

  • Use a nav element
  • use an aria-label attribute to describe the breadcrumbs
  • use .visually-hidden to only show the 'you are here' label to screen readers.
  • use schema.org microdata for BreadcrumbList and ListItem.

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you've got a question about the NICE Design System, contact the team.