Astryx Design System

Side Nav@astryxdesign/core v0.0.15 · SideNav

Usage

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 destinations or requires hierarchical grouping.

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

Best practices

Guidance	Practices
Do	Use sections to group related navigation items and help users scan for their destination.
Do	Pair outline and filled icon variants so the selected state is visually distinct.
Don't	Include a SideNavHeading when a TopNav is already providing app identity; this duplicates branding.
Don't	Use for filtering content; use tabs or filter buttons instead.

Examples

Common configurations, variations, and states.

SideNav — End Content

Side navigation items with badges, counts, and context menus as trailing content.

SideNav — Nested Items

Side navigation with collapsible nested items for settings or hierarchical menus.

SideNav — Header with Menu

Side navigation with an account switcher dropdown in the header for multi-account apps.