Vertical Navigation React component
A documentation-style vertical navigation with collapsible sections, nested pages on a guide line, a sliding active pill and marker, a filter that highlights matches (press /), arrow-key movement, and a content pane with breadcrumbs and previous / next links. On phones it folds into a menu button that shows the current page.
About the Vertical Navigation component
Vertical Navigation is the left-hand menu you find in docs, help centers and settings areas, together with the page it controls. Sections fold open and closed, pages can have child pages on a guide line, and the current page is marked by a pill that slides as you move.
It is built for finding things fast: press / to filter, and matching words are highlighted while the right sections open on their own. Arrow keys move through the list, and Previous and Next links at the bottom of each page walk through everything in order.
When to use it
Use it for documentation, help centers, handbooks, settings with many pages, or any content with two levels of structure.
For an app's main navigation with icons and a collapsible rail, use App Shell with Sidebar instead.
Installation
Add the Vertical Navigation component to your project with the shadcn CLI. It lands in components/vertical-navigation.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/vertical-navigationOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<VerticalNavigation /> accepts 5 props, all optional.
| Prop | Type | Default |
|---|---|---|
| sections | { id: string; title: string; icon: "book" | "database" | "lock" | "card"; pages: VerticalNavPage[] }[] | SECTIONS |
| defaultPage | string | "create-branch" |
| onNavigate | (pageId: string) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- sections{ id: string; title: string; icon: "book" | "database" | "lock" | "card"; pages: VerticalNavPage[] }[]Default: SECTIONS
- defaultPagestringDefault: "create-branch"
- onNavigate(pageId: string) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Vertical Navigation FAQ
- How do I connect it to my router?
- Pass defaultPage from the current URL and push a new URL in onNavigate. The block keeps the active page in sync as people click, filter or use Previous and Next.
- How deep can pages nest?
- Two levels: pages and their children. Deeper trees get hard to scan in a sidebar, so link to a child page's own sections from its content instead.
- What does the filter search?
- Page titles. A parent stays visible when one of its children matches, and the matching text is highlighted. Press Escape to clear it.
- What happens on phones?
- The menu folds into a button that shows the current page. Tapping it opens the full menu above the content, and choosing a page closes it again.
- Is it accessible?
- It is a nav landmark with real buttons, aria-expanded on every folding control, aria-current on the active page, a labelled filter, arrow-key and Home / End movement, and a breadcrumb list on each page.
