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
| 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. |
Side navigation items with badges, counts, and context menus as trailing content.
Side navigation with collapsible nested items for settings or hierarchical menus.
Side navigation with an account switcher dropdown in the header for multi-account apps.