Product block

Rail Plus Secondary Panel

A narrow rail of labelled sections beside a panel that lists the pages inside the chosen one, for products with more destinations than one list can hold.

176 lineslucide-react

sidebar
two-pane
rail
sections
navigation

What's included

components/sidebar-two-pane.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add sidebar-two-pane

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

Projects / Website relaunch

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/sidebar-two-pane.tsx

'use client'

/**
 * <SidebarTwoPane> — a narrow rail of top-level sections beside a secondary
 * panel that lists whatever lives inside the chosen one.
 *
 * The pattern for products with more destinations than one flat list can
 * hold: the rail answers "which area", the panel answers "which page".
 *
 *  - The rail buttons are labelled in text under the icon, not by tooltip.
 *    A rail whose only names appear on hover is a guessing game for anyone
 *    who cannot hover.
 *  - The chosen section is `aria-current="true"` (a set, not a page) and the
 *    panel heading is what the panel's list is labelled by, so choosing a
 *    section changes what a screen reader announces as well as what is drawn.
 *  - The panel is a live region only in the sense that matters: focus stays on
 *    the rail button you pressed, so switching sections never yanks you into
 *    the list.
 *  - Ids are rooted in `useId()`.
 */

import * as React from 'react'
import { FolderKanban, Users, BookOpen, Settings, Plus } from 'lucide-react'

export interface TwoPaneSection {
  id: string
  label: string
  icon: React.ReactNode
  heading: string
  links: string[]
}

export interface SidebarTwoPaneProps {
  sections?: TwoPaneSection[]
  defaultSectionId?: string
  children?: React.ReactNode
  className?: string
}

const icon = 'h-5 w-5'

const DEFAULT_SECTIONS: TwoPaneSection[] = [
  {
    id: 'projects',
    label: 'Projects',
    icon: <FolderKanban aria-hidden className={icon} />,
    heading: 'Projects',
    links: ['Website relaunch', 'Mobile app', 'Design system', 'Q4 planning', 'Archived'],
  },
  {
    id: 'team',
    label: 'Team',
    icon: <Users aria-hidden className={icon} />,
    heading: 'Team',
    links: ['Members', 'Roles & access', 'Invitations', 'Time off'],
  },
  {
    id: 'docs',
    label: 'Docs',
    icon: <BookOpen aria-hidden className={icon} />,
    heading: 'Docs',
    links: ['Getting started', 'Guides', 'API reference', 'Changelog'],
  },
  {
    id: 'settings',
    label: 'Settings',
    icon: <Settings aria-hidden className={icon} />,
    heading: 'Settings',
    links: ['General', 'Billing', 'Security', 'Integrations'],
  },
]

export function SidebarTwoPane({
  sections = DEFAULT_SECTIONS,
  defaultSectionId = 'projects',
  children,
  className = '',
}: SidebarTwoPaneProps) {
  const uid = React.useId()
  const [sectionId, setSectionId] = React.useState(defaultSectionId)
  const [linkByRail, setLinkByRail] = React.useState<Record<string, string>>({})

  const section = sections.find((s) => s.id === sectionId) ?? sections[0]
  const activeLink = linkByRail[section.id] ?? section.links[0]
  const headingId = `${uid}-heading`

  return (
    <div
      className={`flex h-[32rem] overflow-hidden rounded-2xl border border-border/60 bg-background ${className}`}
    >
      <nav
        aria-label="Sections"
        className="flex w-[4.5rem] shrink-0 flex-col items-center gap-1 border-e border-border/60 bg-card/60 py-3"
      >
        <span
          aria-hidden
          className="mb-2 flex h-9 w-9 items-center justify-center rounded-xl bg-primary text-sm font-bold text-primary-foreground"
        >
          N
        </span>
        {sections.map((s) => {
          const on = s.id === section.id
          return (
            <button
              key={s.id}
              type="button"
              aria-current={on ? 'true' : undefined}
              aria-controls={`${uid}-panel`}
              onClick={() => setSectionId(s.id)}
              className={`flex w-14 flex-col items-center gap-1 rounded-xl py-2 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
                on
                  ? 'bg-primary/10 text-primary'
                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
              }`}
            >
              {s.icon}
              <span className="w-full truncate text-center">{s.label}</span>
            </button>
          )
        })}
      </nav>

      <aside
        id={`${uid}-panel`}
        aria-labelledby={headingId}
        className="hidden w-56 shrink-0 flex-col border-e border-border/60 bg-card/30 md:flex"
      >
        <div className="flex h-14 items-center justify-between px-4">
          <h2 id={headingId} className="text-sm font-semibold tracking-tight">
            {section.heading}
          </h2>
          <button
            type="button"
            aria-label={`New in ${section.heading}`}
            className="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
          >
            <Plus aria-hidden className="h-4 w-4" />
          </button>
        </div>
        <ul className="space-y-0.5 overflow-y-auto px-2 pb-3">
          {section.links.map((link) => {
            const on = link === activeLink
            return (
              <li key={link}>
                <a
                  href="#"
                  aria-current={on ? 'page' : undefined}
                  onClick={(e) => {
                    e.preventDefault()
                    setLinkByRail((prev) => ({ ...prev, [section.id]: link }))
                  }}
                  className={`block truncate rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary ${
                    on
                      ? 'bg-muted font-medium text-foreground'
                      : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
                  }`}
                >
                  {link}
                </a>
              </li>
            )
          })}
        </ul>
      </aside>

      <main className="hidden min-w-0 flex-1 p-6 sm:block">
        {children ?? (
          <div className="flex h-full items-center justify-center rounded-xl border border-dashed border-border/60 text-sm text-muted-foreground">
            {section.heading} / {activeLink}
          </div>
        )}
      </main>
    </div>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/sidebar-two-pane.tsx and import it where you need the section:

import { SidebarTwoPane } from '@/components/sidebar-two-pane'

Customize

1 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`sections`	`TwoPaneSection[]`	`DEFAULT_SECTIONS`
`defaultSectionId`	`string`	`'projects'`
`children`	`React.ReactNode`	—
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

This block is interactive. The markup below is its initial state with the event handlers stripped — you will need to re-wire the behaviour in your framework.

sidebar-two-pane.html

<!--
  Rail Plus Secondary Panel — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block is interactive in React and the handlers are NOT here.
  Buttons, toggles and menus render in their initial state and do
  nothing until you wire them up.
-->
<div class="flex h-[32rem] overflow-hidden rounded-2xl border border-border/60 bg-background ">
  <nav aria-label="Sections" class="flex w-[4.5rem] shrink-0 flex-col items-center gap-1 border-e border-border/60 bg-card/60 py-3">
    <span aria-hidden="true" class="mb-2 flex h-9 w-9 items-center justify-center rounded-xl bg-primary text-sm font-bold text-primary-foreground">N</span>
    <button type="button" aria-current="true" aria-controls="_R_0_-panel" class="flex w-14 flex-col items-center gap-1 rounded-xl py-2 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary bg-primary/10 text-primary">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-folder-kanban h-5 w-5" aria-hidden="true">
        <path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"></path>
        <path d="M8 10v4"></path>
        <path d="M12 10v2"></path>
        <path d="M16 10v6"></path>
      </svg>
      <span class="w-full truncate text-center">Projects</span>
    </button>
    <button type="button" aria-controls="_R_0_-panel" class="flex w-14 flex-col items-center gap-1 rounded-xl py-2 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-users h-5 w-5" aria-hidden="true">
        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
        <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
        <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
        <circle cx="9" cy="7" r="4"></circle>
      </svg>
      <span class="w-full truncate text-center">Team</span>
    </button>
    <button type="button" aria-controls="_R_0_-panel" class="flex w-14 flex-col items-center gap-1 rounded-xl py-2 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open h-5 w-5" aria-hidden="true">
        <path d="M12 7v14"></path>
        <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"></path>
      </svg>
      <span class="w-full truncate text-center">Docs</span>
    </button>
    <button type="button" aria-controls="_R_0_-panel" class="flex w-14 flex-col items-center gap-1 rounded-xl py-2 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted hover:text-foreground">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings h-5 w-5" aria-hidden="true">
        <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"></path>
        <circle cx="12" cy="12" r="3"></circle>
      </svg>
      <span class="w-full truncate text-center">Settings</span>
    </button>
  </nav>
  <aside id="_R_0_-panel" aria-labelledby="_R_0_-heading" class="hidden w-56 shrink-0 flex-col border-e border-border/60 bg-card/30 md:flex">
    <div class="flex h-14 items-center justify-between px-4">
      <h2 id="_R_0_-heading" class="text-sm font-semibold tracking-tight">Projects</h2>
      <button type="button" aria-label="New in Projects" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus h-4 w-4" aria-hidden="true">
          <path d="M5 12h14"></path>
          <path d="M12 5v14"></path>
        </svg>
      </button>
    </div>
    <ul class="space-y-0.5 overflow-y-auto px-2 pb-3">
      <li>
        <a href="#" aria-current="page" class="block truncate rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary bg-muted font-medium text-foreground">Website relaunch</a>
      </li>
      <li>
        <a href="#" class="block truncate rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted/60 hover:text-foreground">Mobile app</a>
      </li>
      <li>
        <a href="#" class="block truncate rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted/60 hover:text-foreground">Design system</a>
      </li>
      <li>
        <a href="#" class="block truncate rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted/60 hover:text-foreground">Q4 planning</a>
      </li>
      <li>
        <a href="#" class="block truncate rounded-lg px-3 py-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary text-muted-foreground hover:bg-muted/60 hover:text-foreground">Archived</a>
      </li>
    </ul>
  </aside>
  <main class="hidden min-w-0 flex-1 p-6 sm:block">
    <div class="flex h-full items-center justify-center rounded-xl border border-dashed border-border/60 text-sm text-muted-foreground">Projects / Website relaunch</div>
  </main>
</div>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
This block is interactive in React — toggles, menus or form state. None of that survives here; the markup is the closed/default state and the handlers are gone. Re-wire them in your own framework.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

10 more blocks in Sidebars

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Sidebars

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

More Sidebars blocks

View category

Rail Plus Secondary Panel

What's included

Works with

License

Preview

Source

Before you paste

Where it goes

Customize

Props

Not using React?

For AI

10 more blocks in Sidebars

Shipping one commercially

More Sidebars blocks

Grouped App Sidebar

Collapsible Icon-Rail Sidebar

Nested Accordion Sidebar

Sidebar With Workspace Switcher

Floating Inset Sidebar

Resizable Sidebar With Splitter

Docs Sidebar With Filter

Chat History Sidebar

Mail Folders Sidebar

File Explorer Tree Sidebar