NavigationNavigation8 props
Side Nav
A sidebar navigation component for organizing application pages with sections, nested items, and icons. Use SideNav as the primary navigation when an app has 5 or more destinati...
공식 문서 열기Preview
Import
import {SideNav} from '@astryxdesign/core/SideNav';Astryx 문서 권장 방식대로 root barrel이 아니라 컴포넌트 subpath에서 가져옵니다.
When to use
A sidebar navigation component for organizing application pages with sections, nested items, and icons. Use SideNav as the primary navigation when an app has 5 or more destinati...
sidenavsidebarnavigationdrawermenunavasidesidemenu
Important props
collapsibleboolean | { defaultIsCollapsed?: boolean; isCollapsed?: boolean; onCollapsedChange?: (isCollapsed: boolean) => void; hasButton?: boolean; buttonLabel?: string }optional
Theming targets
astryx-side-navastryx-side-nav-headingastryx-side-nav-itemastryx-side-nav-section
Best practices
- DoUse sections to group related navigation items and help users scan for their destination.
- DoPair outline and filled icon variants so the selected state is visually distinct.
- Do notInclude a SideNavHeading when a TopNav is already providing app identity; this duplicates branding.
- Do notUse for filtering content; use tabs or filter buttons instead.