Site Navigation Header

Navigation Header

The logo, the links, one action. The links fold into Mobile Nav on phones.

Preview

Usage

tsx

import { NavigationHeader, MobileNav, Button } from "zostel-ui";

const links = [
  { label: "Places", href: "/destinations" },
  { label: "Trips", href: "/trips" },
];

<NavigationHeader
  navItems={links}
  actions={
    <>
      <Button size="sm">Book</Button>
      <MobileNav sections={[{ links }]} />   {/* phones only */}
    </>
  }
/>

Props

Prop	Type	Default	Description
`navItems`	`{ label: string; href: string }[]`	`[]`	The links in the middle (from md up).
`logoColor`	`"default" \| "white" \| "orange"`	`"default"`	The lockup’s colourway.
`actions`	`ReactNode`	—	On the right: a button, a Mobile Nav.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

navItems

Type: { label: string; href: string }[]

Default: []

The links in the middle (from md up).

logoColor

Type: "default" | "white" | "orange"

Default: "default"

The lockup’s colourway.

actions

Type: ReactNode

Default: —

On the right: a button, a Mobile Nav.

className

Type: string

Default: —

More classes, merged with the component’s own (tailwind-merge).