reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
Sidebar
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Sidebar

Shell

Compose collapsible navigation with header, content, footer, groups, and items, plus a Ctrl+[ shortcut.

nav
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { Sidebar, useSidebar } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

실전 패턴 — 접기/펼치기 + 유저 프로필

MyApp
메뉴
시스템
김

김수현

sh@example.com

대시보드

Ctrl+[ 로 사이드바 토글

AppShell + Sidebar 조합

MyApp
Pro
워크스페이스홈인박스검색
프로젝트프로덕션개발 서버

홈

AppShell.Header + AppShell.Sidebar + AppShell.Content 조합

메인 콘텐츠 영역

© 2026 MyApp

side=right — 속성 패널

에디터 영역
속성
레이아웃
스타일

Sidebar

PropTypeDefaultDescription
childrenRequiredReactNode—Sidebar.Header, Sidebar.Content, Sidebar.Footer 자식 요소
collapsiblebooleanfalse접기/펼치기 토글 지원
defaultCollapsedbooleanfalse초기 접힘 상태
collapsedboolean—제어 모드: 접힘 상태
onCollapsedChange(collapsed: boolean) => void—제어 모드: 접힘 상태 변경 핸들러
widthnumber280펼침 상태 너비 (px)
collapsedWidthnumber56접힘 상태 너비 (px)
side"left" | "right""left"사이드바 위치
labelstring"사이드바"aside aria-label
classNamestring—커스텀 CSS 클래스

Sidebar.Group

PropTypeDefaultDescription
childrenRequiredReactNode—Sidebar.Item 요소들
labelstring—그룹 레이블 (접힌 상태에서 숨겨짐)
classNamestring—커스텀 CSS 클래스

Sidebar.Item

PropTypeDefaultDescription
childrenRequiredReactNode—항목 레이블 텍스트
iconReactNode—아이콘 (접힌 상태에서도 표시)
activebooleanfalse활성 상태 (aria-current=page)
onClick() => void—클릭 핸들러
hrefstring—링크 URL — 설정 시 <a> 태그로 렌더링
tooltipstring—접힌 상태에서 Tooltip 표시 (미지정 시 children 텍스트)
badgeReactNode—우측 배지 (숫자/텍스트). 접힌 상태에서 아이콘 위 dot으로 축소
classNamestring—커스텀 CSS 클래스

컴포넌트 의존 관계

깊이
▲ USED BY (1)▼ USES (1)app-shellSidebarsidebar-nav
View test results

테스트 커버리지

2026년 7월 9일21/21 통과
21성공
0실패
21전체
  • 3영역을 렌더링한다
  • aside 요소로 렌더링하고 aria-label이 있다
  • 커스텀 label을 적용한다
  • 기본 width가 적용된다
  • 커스텀 width가 적용된다
  • side=right일 때 data-side 속성이 설정된다
  • Trigger 클릭으로 접힘/펼침이 토글된다
  • Trigger에 aria-expanded가 설정된다
  • collapsible=false일 때 Trigger가 렌더링되지 않는다
  • 제어 모드에서 onCollapsedChange가 호출된다
  • Group이 레이블과 함께 렌더링된다
  • Item에 아이콘을 렌더링한다
  • active Item에 aria-current=page가 설정된다
  • 접힌 상태에서 텍스트가 숨겨지고 Tooltip이 제공된다
  • Separator가 렌더링된다
  • Item onClick이 호출된다
  • badge가 펼친 상태에서 표시된다
  • 접힌 상태에서 badge가 dot으로 표시된다
  • href가 설정되면 <a> 태그로 렌더링된다
  • href + active일 때 aria-current=page가 설정된다
  • href + onClick 모두 동작한다

키보드 동작

키동작
Ctrl+[사이드바 접기/펼치기 토글
↑ ↓사이드바 항목 간 이동
Home / End첫 번째/마지막 사이드바 항목으로 이동

Related components

opt-ui

SidebarNav

Shells

Navigate a sidebar with Composite keyboard support and automatic pathname synchronization.

opt-ui

AppShell

Shells

Arrange header, sidebar, content, and footer regions. The sidebar stays visible by default; callers control responsive hiding or drawer behavior.

opt-ui

ContentTabs

Shells

Switch between content panels with a wrapper around the Tabs primitive.

opt-ui

AppMenubar

Shells

Use a desktop-style menu bar with checkbox and radio menu items.

opt-ui

CommandPalette

Shells

Find commands with a Cmd+K-style palette combining Dialog, Combobox, and fuzzy search.

opt-ui

CommandPaletteTrigger

Shells

Open CommandPalette with an automatically bound Cmd+K shortcut.

PreviousPromptTemplateNextAppShell