Sidebar

Use Sidebar to build consistent, accessible interfaces aligned with the shared design system.

Installation

1. Copy the source code:

Source in this monorepo: packages/ui/src/components/sidebar.tsx
Place in your project: components/ui/sidebar.tsx
Required utility: lib/utils.ts (for cn helper)

2. Update the import paths to match your project structure.

Usage

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
} from "@hoag/ui/components/sidebar";
 
export default function Demo() {
  return (
    <SidebarProvider defaultOpen>
      <div className="flex h-64 w-full overflow-hidden rounded-lg border">
        <Sidebar collapsible="none">
          <SidebarContent>
            <SidebarGroup>
              <SidebarGroupLabel>Navigation</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <span>Dashboard</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <span>Projects</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>
        </Sidebar>
        <SidebarInset className="min-h-0 p-4">
          <h3 className="text-sm font-medium">Main Content</h3>
          <p className="text-muted-foreground mt-2 text-sm">
            Your page content renders inside SidebarInset.
          </p>
        </SidebarInset>
      </div>
    </SidebarProvider>
  );
}

Import

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupAction,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInput,
  SidebarInset,
  SidebarMenu,
  SidebarMenuAction,
  SidebarMenuBadge,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSkeleton,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  SidebarProvider,
  SidebarRail,
  SidebarSeparator,
  SidebarTrigger,
  defaultSidebarConfig,
  useSidebar,
} from "@hoag/ui/components/sidebar";

Basic Example

import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarInset,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
} from "@hoag/ui/components/sidebar";
 
export function SidebarBasicExample() {
  return (
    <SidebarProvider defaultOpen>
      <div className="flex h-64 w-full overflow-hidden rounded-lg border">
        <Sidebar collapsible="none">
          <SidebarContent>
            <SidebarGroup>
              <SidebarGroupLabel>Navigation</SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <span>Dashboard</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                  <SidebarMenuItem>
                    <SidebarMenuButton>
                      <span>Projects</span>
                    </SidebarMenuButton>
                  </SidebarMenuItem>
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>
        </Sidebar>
        <SidebarInset className="min-h-0 p-4">
          <h3 className="text-sm font-medium">Main Content</h3>
          <p className="text-muted-foreground mt-2 text-sm">
            Your page content renders inside SidebarInset.
          </p>
        </SidebarInset>
      </div>
    </SidebarProvider>
  );
}

Composition Pattern

import { Sidebar } from "@hoag/ui/components/sidebar";
 
export function SidebarSection() {
  return (
    <section className="space-y-3">
      <h3 className="text-sm font-medium">Sidebar section</h3>
      <Sidebar />
    </section>
  );
}

Accessibility Checklist

Verify semantic roles and ARIA attributes for interactive behavior.
Keep keyboard navigation and focus visibility consistent in all states.
Ensure color contrast meets accessibility requirements in light and dark themes.
Provide screen reader context for dynamic state or content changes.

Testing Checklist

Add render tests for default and key variant states.
Add interaction tests for callbacks and state transitions.
Add visual regression checks for responsive and theme variations.
Cover edge states such as loading, empty, disabled, and error.

Production Tips

Wrap component logic in feature-level abstractions for domain behavior.
Keep visual variants centralized to avoid style drift across screens.
Reuse a single import path strategy for simpler refactors.
Mirror documented states in Storybook and QA checklists.

Named Exports

Sidebar
SidebarContent
SidebarFooter
SidebarGroup
SidebarGroupAction
SidebarGroupContent
SidebarGroupLabel
SidebarHeader
SidebarInput
SidebarInset
SidebarMenu
SidebarMenuAction
SidebarMenuBadge
SidebarMenuButton
SidebarMenuItem
SidebarMenuSkeleton
SidebarMenuSub
SidebarMenuSubButton
SidebarMenuSubItem
SidebarProvider
SidebarRail
SidebarSeparator
SidebarTrigger
defaultSidebarConfig
useSidebar

API Reference

For authoritative prop signatures and implementation details, inspect:

packages/ui/src/components/sidebar.tsx

Menubar Navigation Menu