Site Mobile Nav

Mobile Nav

The menu on a phone: a sheet from the left with the lockup, the links and one action.

Preview

Tap the menu.

Usage

tsx

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

<MobileNav
  sections={[
    { title: "Go", links: [{ label: "Places", href: "/destinations", active: true }, { label: "Trips", href: "/trips" }] },
    { title: "You", links: [{ label: "My stays", href: "/stays" }] },
  ]}
  footer={<Button className="w-full">Book a bed</Button>}
/>

Props

Prop	Type	Default	Description
`sections`	`{ title?; links: { label; href; active? }[] }[]`	—	Groups of links; active marks the current page.
`logo`	`ReactNode`	`the Zostel lockup`	The top of the panel.
`footer`	`ReactNode`	—	Under the links.
`className`	`string`	—	It hides itself from md up (md:hidden) — pass "md:block" to keep it.

sections

Type: { title?; links: { label; href; active? }[] }[]

Default: —

Groups of links; active marks the current page.

logo

Type: ReactNode

Default: the Zostel lockup

The top of the panel.

footer

Type: ReactNode

Default: —

Under the links.

className

Type: string

Default: —

It hides itself from md up (md:hidden) — pass "md:block" to keep it.