Skip to main content
Coat of arms of Barbados
Official government website
GovBB Design System

Breadcrumbs

A trail of links showing where the current page sits in the site hierarchy.

Preview

Breadcrumbs

The Breadcrumbs component shows the pages above the current one in the site hierarchy, starting from the homepage. It does not include the current page: users can see that from the page title. The chevron separators are drawn with CSS, so nothing extra is announced to screen readers.

When to use this component

Use breadcrumbs when a page sits within a hierarchy of more than one level and users are likely to want to move back up it, for example from a guide about renewing a passport up to the passports topic page.

When not to use this component

Do not use breadcrumbs inside a linear, multi-step transaction. Use the back button instead. Avoid breadcrumbs if the site is only one level deep, where a link back to the homepage does the same job with less noise.

Collapsing on mobile

If a deep trail risks crowding a small screen, use the govbb-breadcrumbs--collapse-on-mobile modifier. On mobile it shows only the first and last items in the trail; on larger screens the full trail returns.

Collapsed on mobile