전체 카탈로그
내비게이션Navigation8 props

Side Nav

Side Nav는 앱의 주요 섹션을 사이드바 형태로 탐색하게 합니다.

공식 문서 열기
실시간 미리보기내비게이션

미리보기

Import

import {SideNav} from '@astryxdesign/core/SideNav';

Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.

사용 시점

Side Nav는 앱의 주요 섹션을 사이드바 형태로 탐색하게 합니다.

sidenavsidebarnavigationdrawermenunavasidesidemenu

중요 props

collapsibleboolean | { defaultIsCollapsed?: boolean; isCollapsed?: boolean; onCollapsedChange?: (isCollapsed: boolean) => void; hasButton?: boolean; buttonLabel?: string }optional

테마 대상

astryx-side-navastryx-side-nav-headingastryx-side-nav-itemastryx-side-nav-section

사용 지침

  • 권장SideNav의 목적이 드러나도록 레이블과 보조 설명을 함께 제공하세요.
  • 권장상태 변화가 필요한 경우 사용자가 바로 이해할 수 있는 피드백을 연결하세요.
  • 피하기컴포넌트의 기본 상호작용을 우회해 키보드 흐름을 깨뜨리지 마세요.
  • 피하기공간을 줄이기 위해 필요한 레이블이나 설명을 제거하지 마세요.