Sidebar

데스크톱에서는 접고 모바일에서는 패널로 여는 지속적인 앱 탐색에 사용합니다.

미리보기

워크스페이스 탐색

개요·설정 메뉴 항목에 아이콘 축소, 툴팁, 콘텐츠 영역의 사이드바 전환 버튼을 함께 구성합니다.

개요

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

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/sidebar

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

Registry JSON

사용법

Sidebar와 SidebarInset을 SidebarProvider로 감싸세요. 링크를 그룹으로 묶고 현재 위치를 표시한 뒤 콘텐츠 헤더에 이름이 있는 SidebarTrigger를 배치합니다.

"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 레퍼런스

SidebarProvider가 desktop·mobile 상태를 관리하고, 해당 콘텐츠(모바일 Sheet 포함)에 포커스가 있을 때 Ctrl/Cmd+B로 사이드바를 전환합니다. 데스크톱에서는 offcanvas 또는 icon 크기로 접고, 모바일에서는 기존 Sheet를 재사용합니다. 메뉴·툴팁·포커스 상태는 기존 뉴모피즘 토큰을 그대로 사용합니다.

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

미리보기

워크스페이스 탐색

설치

사용법

API 레퍼런스

접근성