reopt designreopt design
DocsExploreToolsPricingBuilder
Start
Overview
Start
Next.js 설치
Private install
Core Concepts
아키텍처
Composition Patterns
Accessibility
Keyboard Patterns
Styling
Theme System
Advanced Patterns
Build & Operate
Skills
AI Integration
CLI (opt surface add)
Dependency Graph
Tools
Canvas Catalog
Theme Builder
Form Builder
Templates
Templates
Releases
Release Notes
Oopt-ui
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

© 2026 reopt-ai. All rights reserved.

SidebarNav

shell

Composite 기반 사이드바 네비게이션. pathname 자동 동기화.

컴포넌트 의존 관계

깊이
▲ USED BY (1)sidebarSidebarNav
100%

기본 사용

홈
대시보드
프로젝트
관리
설정
사용자
결제

테스트 커버리지

2026년 2월 4일5/5 통과
5성공
0실패
5전체
  • navigation role을 렌더링한다
  • 모든 네비게이션 아이템을 렌더링한다
  • 섹션 레이블을 렌더링한다
  • 링크 href가 올바르다
  • aria-label을 설정한다

SidebarNav Props

Prop타입기본값설명
items*NavItemDef[]—네비게이션 항목. { id, label, href, separator?, sectionLabel? }

Import

tsx
import { SidebarNav } from "@reopt-ai/opt-ui";