Side Nav @astryx-svelte/core v0.5.2 · 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
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. |
| Do | Mark the current page with isSelected: it sets aria-current="page", so the current destination is announced rather than carried by color alone. |
| Do | SideNav renders a navigation landmark, and a collapsible item follows the WAI-ARIA APG Disclosure pattern (https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/): the toggle carries aria-expanded and aria-controls, and the group it owns is inert while collapsed. Keep item labels short; they are the accessible name in both expanded and icon-only modes. |
| Do | While the nav is collapsed, an item with children shows them in a submenu flyout. On a device that can hover, pointing at the item opens it after a short delay and moving away closes it; a flyout opened by clicking stays open until it is dismissed. On touch, it opens on tap. Do not put an action in there that has no other route to it. |
| 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.