RetroSidebar

A collapsible sidebar navigation with Mac OS 9 styling, icon-only collapse, and mobile sheet mode.

Installation

npx shadcn@latest add "https://nostalgia-ui.com/r/retro-sidebar.json"

Setup: installing any component also installs nostalgia-theme (the --os9-* tokens and os9-* utilities) via registryDependencies. To add the theme on its own: npx shadcn@latest add https://nostalgia-ui.com/r/nostalgia-theme.json

Import

import { RetroSidebar } from "@/components/ui/retro-sidebar"

A collapsible sidebar navigation with OS9 styling. Supports grouped menu items, active states, and a toggle trigger. The sidebar is pinned to the viewport and scrolls independently from the main content. On mobile, it renders as a slide-in sheet.

The sidebar you see on the left of this page is a live instance of RetroSidebar. Click the chevron button or press Cmd+B / Ctrl+B to collapse it. When collapsed, only icons are visible.

Usage

<RetroSidebarProvider defaultOpen> <RetroSidebar> <RetroSidebarHeader> <RetroSidebarTrigger /> <span>Finder</span> </RetroSidebarHeader> <RetroSidebarContent> <RetroSidebarGroup> <RetroSidebarGroupLabel>Favorites</RetroSidebarGroupLabel> <RetroSidebarMenu> <RetroSidebarMenuItem> <RetroSidebarMenuButton isActive> <Icon /> Macintosh HD </RetroSidebarMenuButton> </RetroSidebarMenuItem> </RetroSidebarMenu> </RetroSidebarGroup> </RetroSidebarContent> </RetroSidebar> <RetroSidebarInset> {/* Main content */} </RetroSidebarInset> </RetroSidebarProvider>

Features

  • Fixed to viewport — sidebar stays pinned while content scrolls
  • Independent scroll — sidebar content scrolls separately
  • Collapse to icons — toggle with button or Cmd+B / Ctrl+B
  • Mobile sheet — renders as a slide-in overlay on small screens
  • OS9 bevels — authentic Mac OS 9 border styling
  • Grouped navigation — organize items with labels
  • Active state — azul highlight for the current item

The active item is highlighted in azul. Click the toggle button or press Cmd+B to collapse. When collapsed, only icons are visible.

View sourceBack to overview