Overview
The Vertical Navigation Template is designed for sidebars, especially in apps or admin panels with multiple sections.
When to Use
- For layouts with persistent side navigation
- When there are many navigation items or nested sections
- When vertical screen space is abundant
Characteristics
- Vertical list of links
- Can include icons, section titles, and nested items
- Easily paired with a header or main content area
States
- Default: Unselected, idle state of a tab
- Active: The currently selected tab
- Hover: The tab being hovered over
- Disabled: A tab that is not interactive or currently available
Anatomy (Figma)
- [Nav vertical]: Template component that can be detached if needed.
- <Nav vertical | Item>: Partial component. Can be set to its state.
- <Nav vertical | Separator horizontal>: Partial components, separates the items.
Look and feel
This template has been completely built with intentional tokens, giving the ability to display the right color scheme accordingly to the theme and mode where it is deployed.
Best Practice
- Keep link labels short and scannable
- Reserve right-aligned space for profile/actions if needed
- Keep alignment consistent (use design tokens)
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.