Section Tabs

ProNew

Sticky in-page tabs that highlight the section in view and scroll to a section when a tab is chosen.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/section-tabs

Prop	Type	Default	Description
`sections`	`{ id: string; label: string }[]`	-	Sections in page order. Each `id` must match an element id.
`label`	`string`	`"Sections"`	Accessible name of the `<nav>` landmark.
`offset`	`number`	`72`	Pixels to keep above a section after scrolling to it (sticky header plus this bar).
`container`	`RefObject<HTMLElement \| null>`	-	Scrollable element to watch and scroll instead of the page.
`variant`	`"underline" \| "pill"`	`"underline"`	Indicator style.
`sticky`	`boolean`	`true`	Stick to the top of the page or container while scrolling.
`stickyTop`	`number`	`0`	Distance from the top when sticky.

Also accepts all <nav> props except children.

Tabs are real #id links, so they work with middle-click and copied URLs. The current tab gets aria-current="location".
When scrolling the page (no container), the URL hash is updated without adding a history entry.
On narrow screens the list scrolls horizontally and keeps the active tab in view.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/section-tabs

Prop	Type	Default	Description
`sections`	`{ id: string; label: string }[]`	-	Sections in page order. Each `id` must match an element id.
`label`	`string`	`"Sections"`	Accessible name of the `<nav>` landmark.
`offset`	`number`	`72`	Pixels to keep above a section after scrolling to it (sticky header plus this bar).
`container`	`RefObject<HTMLElement \| null>`	-	Scrollable element to watch and scroll instead of the page.
`variant`	`"underline" \| "pill"`	`"underline"`	Indicator style.
`sticky`	`boolean`	`true`	Stick to the top of the page or container while scrolling.
`stickyTop`	`number`	`0`	Distance from the top when sticky.

Also accepts all <nav> props except children.

Tabs are real #id links, so they work with middle-click and copied URLs. The current tab gets aria-current="location".
When scrolling the page (no container), the URL hash is updated without adding a history entry.
On narrow screens the list scrolls horizontally and keeps the active tab in view.