Navigation Header

A responsive site navigation bar with the Zostel logo, horizontal nav links, a Book Now CTA button, and a mobile hamburger menu toggle.

Preview

ZOSTEL

Usage

tsx

import { NavigationHeader } from "zostel-ui";

<NavigationHeader
  links={[
    { label: "Hostels", href: "/hostels" },
    { label: "Destinations", href: "/destinations" },
    { label: "Trips", href: "/trips" },
    { label: "About", href: "/about" },
  ]}
  ctaLabel="Book Now"
  ctaHref="/book"
/>

Props

Prop	Type	Default	Description
`links`	`{ label: string; href: string; active?: boolean }[]`	—	Array of navigation link items
`ctaLabel`	`string`	"Book Now"	Call-to-action button text
`ctaHref`	`string`	—	CTA button link URL
`logo`	`ReactNode`	—	Custom logo element (defaults to Zostel logo)
`sticky`	`boolean`	false	Whether the header sticks to the top on scroll
`transparent`	`boolean`	false	Use a transparent background
`className`	`string`	—	Additional CSS classes

links

Type: { label: string; href: string; active?: boolean }[]

Default: —

Array of navigation link items

ctaLabel

Type: string

Default: "Book Now"

Call-to-action button text

ctaHref

Type: string

Default: —

CTA button link URL

logo

Type: ReactNode

Default: —

Custom logo element (defaults to Zostel logo)

sticky

Type: boolean

Default: false

Whether the header sticks to the top on scroll

transparent

Type: boolean

Default: false

Use a transparent background

className

Type: string

Default: —

Additional CSS classes

Previous Hero Section Next Footer