Components

Breadcrumb

Stable

Shows the user's current location within the site hierarchy and provides quick navigation back to parent sections.

Purpose

A breadcrumb trail shows the user exactly where they are within the site's content hierarchy and offers a shortcut back to any parent section without requiring the browser Back button. It answers the question "how did I get here?" at a glance.

Breadcrumbs complement, but do not replace, the primary navigation. They are a wayfinding aid — not the primary means of moving through the site.

Usage

On kuoni.co.uk, breadcrumbs appear on destination, product, and editorial pages where the hierarchy is three or more levels deep — for example: Home → Destinations → Africa → Kenya. They are not used on the homepage or on flat pages (contact, legal) that have no meaningful parent context. Reach for Navigation for the primary means of moving through the site — Breadcrumb only orients the user within it.

Breadcrumbs sit in a consistent position below the main navigation and above the page's H1, on every page deep enough to warrant one.

Anatomy

1
Nav landmark — <nav aria-label="Breadcrumb"> wraps the entire trail. Allows screen-reader users to jump directly to the breadcrumb region.
2
Ancestor links — Teal (#005B55) links to parent pages. Underline appears on hover. Rendered with Next.js <Link>.
3
Separator — ChevronRight icon (14 px, #CCCCCC) between items. Marked aria-hidden="true" — decorative only.
4
Current page — Dark (#1A1A1A) text, not linked, receives aria-current="page". Always the last item.

Variants

With Home link

The most common pattern. Begins from the homepage and traverses the full path to the current page. Pass the Home item explicitly — it is not prepended automatically.

Without Home link

Use when the page exists within a sub-section whose hierarchy does not benefit from surfacing the homepage — for example, a search-results context where "Home" is not a meaningful step back.

Long path (4+ items)

For deep hierarchies. All intermediate items remain linked. The trail wraps onto multiple lines on narrow viewports.

States

Link hover

Ancestor links gain a teal underline on hover to confirm they are interactive.

Hover over 'Destinations' to see the underline state.

Current page (non-linked)

The last item without an href renders as plain dark text with no pointer cursor or underline. It receives aria-current="page" so assistive technology announces it as the current location.

Best practices

Always include the current page as the last item in the items array (without an href).

Showing the current page name gives users confirmation of where they landed and keeps the trail self-contained.

Don't

Give the current page item an href. The last item should never be a link.

A linked current page is confusing — clicking it reloads the same page with no visible result.

Start the trail with a Home link on destination and product pages three or more levels deep.

Including Home in the trail gives users one click to escape deep hierarchies without guessing the URL.

Don't

Show a breadcrumb on pages that are only one level below the homepage.

A breadcrumb on a flat top-level page (e.g. the Contact page) adds noise without helping navigation.

Use the same label text in the breadcrumb as the title of the destination page it links to.

Breadcrumb labels should match the page H1 exactly — inconsistency breaks the mental model.

Don't

Shorten or rephrase destination labels to save space in the breadcrumb.

Abbreviating or rewriting labels (e.g. 'Sub-Saharan' instead of 'Sub-Saharan Africa') forces the user to guess whether it is the same page.

Place the breadcrumb in a consistent location on every page that uses it.

A consistent position (below the main nav, above the page H1) means users always know where to look.

Don't

Relocate the breadcrumb mid-content or bury it below the fold.

Moving the breadcrumb to the bottom of the page or inside a card defeats its wayfinding purpose.

Props

Prop	Type	Default	Description
items*	Array<{ label: string; href?: string }>	—	Ordered list of breadcrumb entries. The last item without an href is rendered as the non-linked current page. Pass the Home item explicitly if needed.
className	string	—	Additional Tailwind classes merged onto the root <nav> element.

Accessibility

Landmark and list structure

The component renders a <nav aria-label="Breadcrumb"> element containing an <ol>. This gives screen-reader users two benefits:

The <nav> landmark is listed in landmark navigation (e.g. NVDA landmarks list, VoiceOver rotor) so they can jump directly to the breadcrumb.
The <ol> announces the number of items — "list, 3 items" — so users know the depth of the hierarchy before reading individual items.

Current page

The current-page item receives aria-current="page". This is announced by screen readers as "current page" or similar, confirming the user's location without requiring them to read all items in sequence.

{/* aria output for last item: "Africa, current page" */}
<Breadcrumb
  items={[
    { label: 'Destinations', href: '/destinations' },
    { label: 'Africa' },
  ]}
/>

Separators

The ChevronRight separator icons are wrapped in aria-hidden="true". Without this, screen readers announce "greater than" or "chevron right" between every item — creating a distracting verbal separator that obscures the actual content. The <ol> structure itself implies the sequence.

Keyboard interaction

Key	Action
`Tab`	Move focus to the next link in the trail
`Shift + Tab`	Move focus to the previous link
`Enter`	Follow the focused link

The current-page item is not focusable — it has no href and renders as a <span>, not an <a> or <button>.

Colour contrast

Ancestor links use teal #005B55 on a white background: contrast ratio 8.6:1, exceeding WCAG 2.1 AA (4.5:1) for small text. The current-page label uses dark #1A1A1A: contrast ratio 17.4:1 (AAA).

Navigation — the primary means of moving through the site; Breadcrumb only orients the user within it.