Components

Rail Nav

A compact right-side rail navigation for long docs, case studies, and portfolio pages with scroll-aware active states.

interactivenavigationdocsmotionaccessibility

Rail Navigation

Small right-side navigation for long docs pages.

Installation

Install the package and add the component.

Usage

Pass the page sections as items.

Props

Customize labels and href values.

Examples

Use it in docs, case studies, or long portfolio pages.

Installation

$npx shadcn@latest add https://ui.navdeepsingh.dev/r/rail-nav.json

API Reference

PropTypeDefaultDescription
itemsRailNavItems[]-Section links rendered in the rail. Each item is { label, href } where href is a hash anchor.
classNamestring''Classes merged onto the outer aside wrapper.

Customization

  • Pass className to restyle the component. Classes are merged with cn, so your utilities win.
  • Styling uses Tailwind utility classes and theme tokens, so it adapts to light/dark mode automatically.
  • Tune behavior with the props in the API reference above, for example items.