Breadcrumb
A hand-drawn breadcrumb navigation trail showing the path to the current page.
Overview
A Breadcrumb shows where the current page sits in the site hierarchy and lets people jump back up
the trail. It is a secondary navigation aid — not a replacement for primary navigation.
Anatomy
A <nav> landmark wrapping an ordered list: each ancestor is a link, separated by a hand-drawn
chevron, and the last entry is the current page (not a link). The API is data-driven on every
platform — pass an items array of { label, href? }.
Variants & States
| State | Status | Notes |
|---|---|---|
| Link | Implemented | Every item except the last is an activatable link. |
| Current page | Implemented | The last item is marked aria-current="page" and is not a link. |
| Hover | Implemented | Links shift to the primary text colour on hover (web). |
| Disabled | Not implemented | — |
Usage
Do
- Order items from the site root to the current page.
- Keep labels short — match the page titles they link to.
- Use it for hierarchy, not for step-by-step flows (use a stepper/wizard for those).
Don't
- Don't make the current page a link — it is the page you are on.
- Don't use a breadcrumb as the only way to navigate; it complements primary nav.
Accessibility
- React / Web Components: a
<nav aria-label="Breadcrumb">landmark wraps an<ol>; the current page carriesaria-current="page". Web Components dispatches aselectevent on link activation. - React Native: the row exposes
role="navigation"with the label; items areaccessibilityRole="link". There is nohrefon React Native — handle navigation in theonSelectcallback. - See the Accessibility Guide.
Content
Short, recognisable labels that mirror the destination page titles. The last item names the current page.
Props API
React@ghds/react
| Prop | Type | Default | Description |
|---|---|---|---|
items | BreadcrumbItem[] | — | Trail of { label, href? }; last item is the current page. |
label | string | 'Breadcrumb' | Accessible name for the nav landmark. |
onSelect | (item, index) => void | — | Fires when a link is activated. |
Web Components@ghds/web-components
| Prop | Type | Default | Description |
|---|---|---|---|
items | GhBreadcrumbItem[] | — | Property (not attribute) — set via JS. |
label | string | 'Breadcrumb' | Accessible name for the nav landmark. |
select event | CustomEvent<{ item, index }> | — | Dispatched on link activation. |
React Native@ghds/react-native
| Prop | Type | Default | Description |
|---|---|---|---|
items | BreadcrumbItem[] | — | Trail of { label, href? }. |
label | string | 'Breadcrumb' | Accessible name. |
onSelect | (item, index) => void | — | Navigate here — there is no href on RN. |
testID | string | — | Test handle for queries. |
Code examples
// React — @ghds/react
import { Breadcrumb } from '@ghds/react/breadcrumb';
<Breadcrumb
items={[
{ label: 'Home', href: '#' },
{ label: 'Components', href: '#' },
{ label: 'Breadcrumb' },
]}
/>;<!-- Web Components — @ghds/web-components -->
<script type="module">
import '@ghds/web-components/breadcrumb';
const el = document.getElementById('crumbs');
el.items = [
{ label: 'Home', href: '#' },
{ label: 'Components', href: '#' },
{ label: 'Breadcrumb' },
];
el.addEventListener('select', (e) => console.log(e.detail.item, e.detail.index));
</script>
<gh-breadcrumb id="crumbs"></gh-breadcrumb>// React Native — @ghds/react-native
import { Breadcrumb } from '@ghds/react-native/breadcrumb';
<Breadcrumb
items={[{ label: 'Home', href: '/' }, { label: 'Data' }]}
onSelect={(item) => navigate(item.href)}
/>;