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"
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.