Mobile Nav

A mobile navigation component with a hamburger menu icon that reveals a slide-out panel with navigation links, login, and signup actions.

Preview

Usage

tsx

import { MobileNav } from "zostel-ui";

<MobileNav
  links={[
    { label: "Hostels", href: "/hostels" },
    { label: "Zo Trips", href: "/trips" },
    { label: "Zo House", href: "/zo-house" },
    { label: "Blog", href: "/blog" },
    { label: "About Us", href: "/about" },
    { label: "Contact", href: "/contact" },
  ]}
  logo={<ZostelLogo />}
  onLogin={() => router.push("/login")}
  onSignup={() => router.push("/signup")}
/>

Props

Prop	Type	Default	Description
`links`	`NavLink[]`	—	Array of navigation link objects with label and href
`logo`	`ReactNode`	—	Logo element to display in the header bar
`onLogin`	`() => void`	—	Callback for Log In button click
`onSignup`	`() => void`	—	Callback for Sign Up button click
`isOpen`	`boolean`	—	Controlled open state
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes

links

Type: NavLink[]

Default: —

Array of navigation link objects with label and href

logo

Type: ReactNode

Default: —

Logo element to display in the header bar

onLogin

Type: () => void

Default: —

Callback for Log In button click

onSignup

Type: () => void

Default: —

Callback for Sign Up button click

isOpen

Type: boolean

Default: —

Controlled open state

onOpenChange

Type: (open: boolean) => void

Default: —

Callback when open state changes

Previous Brand Switcher Next Testimonial Carousel