Neumorphism UI

Sidebar

Use Sidebar for persistent application navigation that can collapse on desktop and open as a panel on mobile.

Preview

Workspace navigation

Compare overview and settings menu items with icon collapse, tooltips, and a content-area sidebar toggle.

Loading preview.

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/sidebar

Install the shared base once, then add components and their dependencies with the CLI.

Registry JSON

Usage

Wrap Sidebar and SidebarInset in SidebarProvider. Organize links in menu groups, mark the current link active, and place a named SidebarTrigger in the content header.

"use client";

import { Sidebar, SidebarContent, SidebarInset, SidebarMenu, SidebarMenuItem, SidebarMenuLink, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";

export default function Example() {
  return (
    <SidebarProvider className="min-h-80">
      <Sidebar>
        <SidebarContent>
          <SidebarMenu>
            <SidebarMenuItem><SidebarMenuLink href="/projects" isActive>Projects</SidebarMenuLink></SidebarMenuItem>
            <SidebarMenuItem><SidebarMenuLink href="/settings">Settings</SidebarMenuLink></SidebarMenuItem>
          </SidebarMenu>
        </SidebarContent>
      </Sidebar>
      <SidebarInset>
        <header className="p-4"><SidebarTrigger /></header>
        <main className="p-4">Your projects</main>
      </SidebarInset>
    </SidebarProvider>
  );
}

API Reference

SidebarProvider owns desktop and mobile state. Ctrl/Cmd+B toggles its Sidebar while focus is within its content, including its mobile Sheet. Desktop can collapse off-canvas or to icon width, while mobile reuses the existing Sheet. Menus, tooltips, and focus states stay on the existing neumorphic token system.

ComponentPropTypeDefaultDescription
SidebarProviderdefaultOpen / open / onOpenChangeboolean / controlled state—Controls the initial or controlled desktop open state.
Sidebarcollapsible"offcanvas" | "icon" | "none""offcanvas"On desktop, offcanvas hides a collapsed sidebar; icon retains icon width. none keeps the full width and menu labels.
Sidebarside / variant"left" | "right" / "sidebar" | "floating" | "inset"—Chooses the side and surface presentation.
SidebarTriggerlabelstring"Toggle sidebar"Localizes the accessible name of the collapse toggle.
SidebarMenuButton / SidebarMenuLinkisActive / tooltipboolean / string—Marks the active destination and provides a tooltip when icon-collapsed.

Accessibility

  • 01

    Navigation links need real destinations and readable names; use isActive for the current location.

  • 02

    Icon-collapsed items retain accessible names, and tooltips supplement rather than replace those names.

  • 03

    The mobile Sidebar behaves as a modal Sheet and closes with Escape. Ctrl or Command+B applies only while its provider content or mobile Sheet has focus, and leaves editable fields, composition and already handled key events unchanged.