Navbar — Workspace sidebar rail

A vertical navigation rail sits beside the current page heading and its actions.

ReactHTML

1440 × 900

Component.tsx97 lines

export default function NavbarSidebarRail() {
  return (
    <header className="border-b border-neutral-200 bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-6 grid gap-8 md:grid-cols-[12rem_minmax(0,1fr)]">
        <nav
          aria-label="Workspace navigation"
          className="flex flex-col gap-6 border-b border-neutral-200 pb-6 md:border-b-0 md:border-r md:pr-6 md:pb-0"
        >
          <a
            href="#"
            aria-label="Logo home"
            className="inline-flex items-center gap-2 font-semibold text-neutral-900 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            <svg
              aria-hidden="true"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
              className="size-6"
            >
              <rect x="4" y="4" width="16" height="16" rx="3" />
              <path d="M4 12h16M12 4v16" />
            </svg>
            Logo
          </a>
          <ul role="list" className="space-y-2">
            <li>
              <a
                href="#"
                aria-current="page"
                className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 block py-2"
              >
                Overview
              </a>
            </li>
            <li>
              <a
                href="#"
                className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 block py-2"
              >
                Projects
              </a>
            </li>
            <li>
              <a
                href="#"
                className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 block py-2"
              >
                Activity
              </a>
            </li>
            <li>
              <a
                href="#"
                className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 block py-2"
              >
                Members
              </a>
            </li>
          </ul>
          <a
            href="#"
            className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            Settings
          </a>
        </nav>
        <div className="min-w-0">
          <p className="text-sm font-medium text-neutral-500">Workspace</p>
          <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl mt-3">
            Current page heading
          </h2>
          <p className="text-base text-neutral-600 mt-4">
            Short context for the page reached through this navigation.
          </p>
          <div className="mt-8 flex flex-wrap gap-3">
            <a
              href="#"
              className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
            >
              New project
            </a>
            <a
              href="#"
              className="inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
            >
              View activity
            </a>
          </div>
        </div>
      </div>
    </header>
  )
}

Pattern notes

When to use: Use for an application with a small stable destination list. Pick a horizontal bar for a marketing page. Variations: add a workspace switcher, group settings separately, or show a project count beside a destination.
Hierarchy: The brand identifies the workspace. Four primary destinations precede settings; the page heading and actions confirm the active destination. Limit page context to 20 words and navigation labels to 2.
Responsive: Below 768px the rail becomes a block above the page context with a bottom border. The destination list remains vertical, and the page action row wraps.
Layout: Use a max-w-6xl header with 24px padding. At 768px, a 192px navigation rail and flexible page context share a 32px gap. The rail has a right border and 24px inset; destinations use 8px vertical spacing.
States: Links and buttons use neutral hover states and a 2px keyboard focus outline offset by 2px. Filled actions lighten from neutral-900 to neutral-700; outlined actions fill neutral-50. Informational regions remain static.

Desktop wireframe

┌──────────────────────────────────────────────────────────┐
│Logo               Workspace                              │
│[Overview]         Current page heading                   │
│[Projects]         Page context                           │
│[Activity]                                                │
│[Members]          [New project] [View activity]          │
│                                                          │
│[Settings]                                                │
└──────────────────────────────────────────────────────────┘

View all

Navbar — Announcement, search and categories
Layout tags: stacked,row,form
Navbar — App header with tabs
Layout tags: stacked,row,compact
Navbar — Brand beside stacked navigation
Layout tags: asymmetric,row,compact

Navbar — Workspace sidebar rail

Pattern notes

More in Navbar

Navbar — Announcement, search and categories

Navbar — App header with tabs

Navbar — Brand beside stacked navigation