Breadcrumb

Breadcrumbs help users to understand where they are within a website’s structure. 

Refer to NSW Digital Design System - Breadcrumb for full guidance and demo on how and when to use this.

Preview

Placement

Breadcrumbs appear at the top of a webpage, just below the primary navigation or header. The position of the breadcrumbs cannot be changed.

Customisation

Breadcrumb links appear visually different to normal links within your content. Your brand's link text colour will be applied. The text is not bolded.

Accessibility features

• The focus indicator moves across each link in the list except for the final, non-interactive link.
• The navigation region is announced via a <nav> element with an <aria-label> attribute.
• The final, non-interactive link is set as the <aria-current> attribute.
• The separator icon is set as <aria-hidden> and is not announced by the screen reader.

Responsive behaviour

On mobile screens, the breadcrumbs displays a link to the immediate parent page and current page only. 

Page type

Breadcrumbs are a mandatory component on:

• content pages
• campaign pages
• landing pages
• search
  
• Easy read.

They cannot be used on:

• homepage.