탐색과 공개@neumorphism-ui/sidebar

Sidebar

SidebarProvider가 desktop·mobile 상태와 Ctrl/Cmd+B 단축키를 관리합니다. 데스크톱에서는 offcanvas 또는 icon 크기로 접고, 모바일에서는 기존 Sheet를 재사용합니다. 메뉴·툴팁·포커스 상태는 기존 뉴모피즘 토큰을 그대로 사용합니다.

@neumorphism-ui/sidebar

Registry JSON

미리보기

개요

현재 프로젝트의 주요 정보를 확인합니다.

설치

npx shadcn@latest add @neumorphism-ui/sidebar

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

Import

"use client";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarHeader,
  SidebarInset,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuLink,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";

Example

export default function Example() {
  return <SidebarProvider className="min-h-80">
    <Sidebar collapsible="icon">
      <SidebarHeader><strong>Workspace</strong></SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>탐색</SidebarGroupLabel>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem><SidebarMenuLink href="#overview" isActive tooltip="개요"><span aria-hidden="true">⌂</span><span>개요</span></SidebarMenuLink></SidebarMenuItem>
              <SidebarMenuItem><SidebarMenuLink href="#settings" tooltip="설정"><span aria-hidden="true">⚙</span><span>설정</span></SidebarMenuLink></SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
    <SidebarInset><header className="p-3"><SidebarTrigger label="사이드바 전환" /></header><section id="overview" className="p-4">워크스페이스 개요</section></SidebarInset>
  </SidebarProvider>;
}

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`SidebarProvider`	`defaultOpen / open / onOpenChange`	`boolean / controlled state`	`—`	데스크톱 사이드바의 초기 또는 controlled 열림 상태를 관리합니다.
`Sidebar`	`collapsible`	`"offcanvas" \| "icon" \| "none"`	`"offcanvas"`	접힌 상태에서 완전히 숨길지 icon 너비로 유지할지 지정합니다.
`Sidebar`	`side / variant`	`"left" \| "right" / "sidebar" \| "floating" \| "inset"`	`—`	배치 방향과 표면 표현을 선택합니다.
`SidebarTrigger`	`label`	`string`	`"Toggle sidebar"`	접기·펼치기 버튼의 접근 가능한 이름을 지역화합니다.
`SidebarMenuButton / SidebarMenuLink`	`isActive / tooltip`	`boolean / string`	`—`	현재 위치의 inset 상태와 icon-collapse 툴팁을 제공합니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성