Navigation Section Nav

Section Nav

A page's sections as one row, Stays, Trips, About: links that jump down the page, and the one in view lights up as you scroll.

Preview

Stays in Manali

Dorm beds and private rooms, a café and a bonfire most nights.

Trips from Manali

Up to the passes, down to the river, out to the villages in the valley.

About Manali

Walk the deodar woods to Hadimba. Then go higher.

Usage

tsx

import { SectionNav } from "zostel-ui";

<SectionNav
  sticky
  sections={[
    { id: "stays", label: "Stays" },
    { id: "trips", label: "Trips" },
    { id: "about", label: "About" },
  ]}
/>

<section id="stays">…</section>

/* your header's height, once, on :root: the row pins under it and a jump lands below both */
:root { --header-h: 4rem; }

Props

Prop	Type	Default	Description
`sections`	`{ id: string; label: string }[]`	—	The sections, in page order: each id is an element on the page.
`offset`	`number`	`--header-h (+ the row) + 16`	How far below the top of the screen (px) a section counts as reached, which is also where a jump lands it. By default: under the header (--header-h) and, when sticky, under this row, with 16 px to spare. The sections get it as scroll-margin-top, so a link from elsewhere and the back button land right too. At the foot of the page the last section lights up even when it is too short to reach the line.
`sticky`	`boolean`	`false`	Pins the row under the page’s header (top: var(--header-h), z 10).
`label`	`string`	`"On this page"`	The row’s name.
`className`	`string`	—	More classes, merged with the component’s own (tailwind-merge).

sections

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

Default: —

The sections, in page order: each id is an element on the page.

offset

Type: number

Default: --header-h (+ the row) + 16

How far below the top of the screen (px) a section counts as reached, which is also where a jump lands it. By default: under the header (--header-h) and, when sticky, under this row, with 16 px to spare. The sections get it as scroll-margin-top, so a link from elsewhere and the back button land right too. At the foot of the page the last section lights up even when it is too short to reach the line.

sticky

Type: boolean

Default: false

Pins the row under the page’s header (top: var(--header-h), z 10).

label

Type: string

Default: "On this page"

The row’s name.

className

Type: string

Default: —

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

On zostel.com

A destination’s page pins Stays, Trips and About under its header. The look is the kit’s Tabs (a well, the current one white), but these are links, so the browser’s back button and a shared link both work; the current one carries aria-current.