Components

Navigation

Stable

The NavBar is the site-level navigation fixed to the top of every page. It carries the Kuoni brand, primary navigation links, a phone CTA and a book-now action — and collapses to a full-screen mobile drawer.

KKUONIExtraordinary Experiences

0800 092 4444Available until 8pm

Speak to an expert

Purpose

The NavBar performs three jobs simultaneously:

Brand anchor — the Kuoni K monogram and wordmark appear on every page, in every context. Black background with Wow Yellow logo makes the brand unmistakeable.
Primary navigation — white text links with Wow Yellow hover state guide users to the four top-level sections of the site. The active link is yellow with a yellow underline, making the current location clear.
Conversion — a phone number (with availability note) and a "Speak to an expert" CTA button sit on the right side of the desktop nav. These are always within reach regardless of where the user is on the page.

The NavBar is fixed to the top of the viewport (position: fixed) with z-index: 50. All page layouts should have padding-top: 64px (the header height) so content starts below it.

Usage

Use NavBar exactly once per page, as the single site-level header — it is not meant to be nested inside page content or repeated per-section. For a secondary trail showing the user's location within a hierarchy (e.g. Destinations > Africa > Kenya), pair it with Breadcrumb rather than adding more top-level links here. For a wide, multi-column dropdown under a nav item, use MegaMenu.

The NavBar sits at the very top of every page, above all other content; Footer is its counterpart at the very bottom, carrying secondary links, legal info, and contact details that don't belong in the primary nav.

Anatomy

KKUONIExtraordinary Experiences

0800 092 4444Available until 8pm

Speak to an expert

1
Logo — Yellow K monogram in a rounded-md container + KUONI wordmark + tagline. Links to logoHref (default "/").
2
Nav links — Horizontal row of text links. White by default, Wow Yellow on hover and active state. Active link has a 2px yellow underline.
3
Phone number — Tappable phone link with Phone icon. White text, Yellow on hover. Availability note below in grey.
4
CTA button — Wow Yellow rounded-md button ("Speak to an expert"). The primary action in the nav — should link to contact or callback page.
5
Hamburger (mobile) — Menu icon visible only on screens below 768px (md breakpoint). Opens the full-screen mobile drawer.
6
Mobile drawer — Full-screen black overlay with nav links stacked vertically, close button top-right, phone + CTA at bottom.

Variants

Desktop

Horizontal layout: logo left, nav links centre, phone + CTA right. Visible at ≥768px. All links fit on one line — avoid adding more than 6 links without testing at 1024px.

KKUONIExtraordinary Experiences

0800 092 4444Available until 8pm

Speak to an expert

Active link

Pass active: true on the link matching the current route. It renders in Wow Yellow with a 2px yellow bottom border. Only one link should be active at a time.

KKUONIExtraordinary Experiences

0800 092 4444Available until 8pm

Speak to an expert

Custom CTA and phone

Override the default phone number and CTA for regional or seasonal campaigns.

KKUONIExtraordinary Experiences

0800 092 4444Open 7 days, 9am-9pm

Book a free consultation

States

Default

Black header with white nav links and white phone text. Wow Yellow K logo on the left. Yellow CTA button on the right.

Link hover

Nav links transition to #F5C518 (Wow Yellow) on hover (150ms ease). No underline — the colour change is the hover signal. Phone number also turns yellow on hover.

Link active

Active link is rendered in #F5C518 with a border-b-2 border-[#F5C518] underline. Applied via link.active: true — set this from your routing logic (usePathname in Next.js App Router).

Mobile drawer open

Hamburger icon becomes an X. A full-screen black drawer slides in covering the entire viewport. The body scroll is not locked by the NavBar itself (unlike Modal) — if scroll-lock is needed, add it in the drawer via a useEffect.

Layout integration

The NavBar is position: fixed and takes no space in the document flow. Add top padding to <main> equal to the header height to prevent content from appearing behind the nav.

// app/layout.js
<header>
  <NavBar links={nav} />
</header>
<main className="pt-16"> {/* 64px = h-16 */}
  {children}
</main>

The Kuoni Design System layout (app/layout.js) already applies pt-header which maps to 64px. If you are embedding NavBar in a custom layout, apply the same offset.

Best practices

Set active: true on exactly one link — the one matching the current route.

One active link at a time — the user is on one page.

Don't

Set active: true on more than one link, or on a parent section when a child page is active.

Multiple active links tell the user they are in several places at once.

Keep the number of top-level nav links between 4 and 6.

4-6 links is the Goldilocks range — enough to navigate, not enough to overwhelm.

Don't

Add more than 6 links to the top-level navigation without testing at 1024px viewport width.

7+ links wrap on medium screens and break the single-line layout.

Keep the phoneNumber prop set so users always have a direct contact route from any page.

The phone number is the primary phone CTA — it is always discoverable.

Don't

Remove the phoneNumber from the NavBar on product pages where you want to drive digital conversions — keep it visible.

Removing the phone number forces users to hunt for contact details.

Use one CTA button in the nav that links to a high-value conversion page (contact, enquiry, appointment).

The yellow CTA contrasts sharply against the black nav — it earns its place.

Don't

Add a second CTA button to the NavBar.

Two CTAs split attention and dilute the conversion signal.

Props

Prop	Type	Default	Description
links*	Array<{ label: string; href: string; active?: boolean }>	—	Top-level navigation links. Each item renders as a Next.js Link. Set active: true on the current page.
logoHref	string	'/'	URL the logo links to. Usually the homepage.
brandName	string	'KUONI'	Brand wordmark text shown next to the K monogram.
tagline	string	'Extraordinary Experiences'	Sub-text below the brand name. Pass an empty string to hide.
phoneNumber	string	'0800 092 4444'	Phone number shown on the right side. Rendered as a tel: link.
phoneAvailability	string	'Available until 8pm'	Availability note shown below the phone number in grey.
ctaLabel	string	'Speak to an expert'	Label for the Wow Yellow CTA button on the right side.
ctaHref	string	'/contact'	URL the CTA button links to.
className	string	—	Additional Tailwind classes on the <header> element.

Accessibility

Because the NavBar is fixed and appears on every page, keyboard users must Tab through all nav links to reach main content. Add a skip link as the very first focusable element in the page:

// At the top of app/layout.js, before <NavBar>
<a
  href="#main-content"
  className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:rounded-md focus:bg-kuoni-yellow focus:px-4 focus:py-2 focus:text-sm focus:font-semibold focus:text-kuoni-dark"
>
  Skip to main content
</a>

Landmarks

<header> is a landmark — screen reader users can jump to it with the "banner" landmark shortcut
<nav aria-label="Main navigation"> is a navigation landmark
The mobile drawer's <nav aria-label="Mobile navigation"> is a separate navigation landmark

Current page

<Link
  href={link.href}
  aria-current={link.active ? 'page' : undefined}
>
  {link.label}
</Link>

aria-current="page" on the active link tells screen readers which link corresponds to the current page — even if the visual distinction (yellow colour) is missed.

Mobile drawer

The drawer has role="dialog" and aria-modal="true". The hamburger button has:

aria-expanded={mobileOpen} — announces open/closed state
aria-label="Open navigation menu" / close button aria-label="Close navigation menu"
aria-controls="mobile-nav" pointing to the drawer id

Phone link

<a href="tel:08000924444">0800 092 4444</a>

The tel: href enables one-tap calling on mobile devices. Screen readers announce it as a telephone link.

Keyboard interaction

Key	Action
`Tab`	Move through logo → nav links → phone → CTA button → hamburger (mobile)
`Enter` / `Space`	Activate link or button
`Escape`	Close mobile drawer when open

MegaMenu — a wide, multi-column dropdown panel triggered from a nav item, for sites with deeper navigation hierarchies than a flat link list.
Breadcrumb — shows the user's location within a page hierarchy; complements the top-level NavBar rather than replacing it.
Footer — the site-level counterpart at the bottom of the page, carrying secondary links and legal information.