Sidebar

Betav1.0.0

SAP UI5 의 SideNavigation / ShellNavigation 디자인 패턴 참고. expanded / collapsed (icon-only) / offcanvas (모바일) 3가지 모드. SidebarTrigger 로 토글, localStorage 로 상태 유지.

Loading…

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarGroup,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";

<SidebarProvider defaultOpen collapsible="icon">
  <div className="flex">
    <Sidebar>
      <SidebarHeader>Acme Inc.</SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>Workspace</SidebarGroupLabel>
          <SidebarMenu>
            <SidebarMenuItem>
              <SidebarMenuButton active icon={<HomeIcon />} tooltip="Home">
                Home
              </SidebarMenuButton>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter>...</SidebarFooter>
    </Sidebar>
    <main>
      <SidebarTrigger />
      {children}
    </main>
  </div>
</SidebarProvider>

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/sidebar.json

Composition

SidebarProvider
├── Sidebar
│   ├── SidebarHeader
│   ├── SidebarContent
│   │   └── SidebarGroup
│   │       ├── SidebarGroupLabel
│   │       └── SidebarMenu
│   │           └── SidebarMenuItem
│   │               └── SidebarMenuButton
│   └── SidebarFooter
└── SidebarTrigger (main 안에)

Dependencies

설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.

npm packages

Package	Version
@base-ui/react	`1.5.0`
clsx	`2.1.1`
tailwind-merge	`3.6.0`

Groudit components

이 컴포넌트가 의존하는 다른 Groudit 컴포넌트 — 함께 설치됩니다.

Accessibility

이 컴포넌트는 WAI-ARIA navigation 패턴을 따릅니다.

Keyboard interactions

Key	Description
`Tab`	사이드바 항목 간 이동.
`EnterSpace`	항목 선택.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

1.3.1 2.1.1 2.4.3

Notes

•collapsed 모드에서 라벨 숨김 — title 속성으로 tooltip 제공.
•모바일 offcanvas — Escape 로 닫기 권장.