Overview
The Vertical Navigation Template is designed for sidebars, especially in apps or admin panels with multiple sections.
When to Use
- As the primary navigation in an app or website
- When there are 3–7 main navigation links
- When vertical space is limited
States
- Default: Unselected, idle state of a item
- Active: The currently selected item
- Hover: The item being hovered over
- Disabled: A item that is not interactive or currently available
Anatomy (Figma)
- <Nav horizontal | Item>: Partial component. Can be set to its state.
- [Nav horizontal]: Template component that can be detached if needed.
Extend the component
In Figma and in code, you can use the slot to enhance the template and display a menu.
- Replace a <Nav horizontal | item> or add the menu component in the template. You may detach it if needed.
- In the Menu component properties, swap the Trigger slot with a <Nav horizontal | item>
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.