Nav Line Ticks Sidebar

ProNew

A sidebar list drawn like a ruler: the current item has the longest tick and its neighbours taper away.

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/nav-line-ticks-sidebar

Prop	Type	Default	Description
`items`	`{ id: string; label: string; href?: string }[]`	`-`	Links. `href` defaults to `#id`.
`label`	`string`	`-`	Accessible name of the navigation.
`value`	`string`	`-`	Controlled current id.
`defaultValue`	`string`	`first id`	Initial current id.
`onValueChange`	`(id: string) => void`	`-`	Called when a link is chosen.

Ticks change with a 300ms transform and opacity transition when the current item changes.
With prefers-reduced-motion: reduce ticks change instantly.
A labelled nav landmark of real links; the current one has aria-current="page".
Ticks are decorative.

Guide and examples


pnpm dlx shadcn@latest add @tealmac-pro/nav-line-ticks-sidebar

Prop	Type	Default	Description
`items`	`{ id: string; label: string; href?: string }[]`	`-`	Links. `href` defaults to `#id`.
`label`	`string`	`-`	Accessible name of the navigation.
`value`	`string`	`-`	Controlled current id.
`defaultValue`	`string`	`first id`	Initial current id.
`onValueChange`	`(id: string) => void`	`-`	Called when a link is chosen.

Ticks change with a 300ms transform and opacity transition when the current item changes.
With prefers-reduced-motion: reduce ticks change instantly.
A labelled nav landmark of real links; the current one has aria-current="page".
Ticks are decorative.