Vertical navigation
Navigation panel located next to page content on screens with sufficient space.
The vertical navigation component is a container enabling users to navigate a product or experience. It’s common on sites or applications with many links that may not fit horizontally.
Also known as: Vertical menu, sidebar navigation, vertical navigation bar, left/right navigation bar, column navigation, UINavigationController (iOS), Vertical ScrollView (Android).
Anatomy
A. Brand mark (optional): Visual element representing Visa, a partner brand, or a fictitious brand associated with the product.
B. Application name (optional): Label indicating the name of the application.
C. Section title (optional): Title used to group navigation elements.
D. Icon (optional): Visual indicator used to enhance the meaning of the navigation link label.
E. Navigation link (required): Label indicating the destination of the link.
F. Chevron (optional): Icon indicating the collapsed or expanded state of a nested navigation item.
G. User profile (optional): Avatar component representing the current user’s account.
H. Collapse icon (optional): UI icon button used to collapse or expand the vertical navigation from the left side of the screen.
Usage
| When to use | When not to use |
|---|---|
| For a large number of navigation items. When horizontal space is limited. | If vertical space is limited. If there are only a few navigational items, use Horizontal navigation instead. |
Best practices
- Reference Application layouts for help deciding which navigation component is best for your use case.
- Ensure the order of the navigation items is consistent throughout the application, as changing it may confuse users.
- Ensure text within the navigation panel wraps to a second line instead of truncating to ensure it’s fully visible to users.
- Include a vertical scroll bar if all navigation items can’t be viewed at once.
- Consider making the brand mark and/or application name function as a link to the homepage of the experience.
- Follow all guidance found in Link and Avatar for implementing a user profile in the navigation panel.
Do
Shift page content to fit the vertical navigation so users can access the main page and navigation simultaneously.
Don't
Obscure page content or limit interactivity when navigation is open. If an overlay is preferred, use a Navigation drawer.
Section titles and nesting
Section titles refer to static text used to group navigation items under a common category. They can be used with or without nested navigation items, which expand or collapse other navigation items. Both methods group related content and help users navigate easily. Decide which to use based on your use case and design preferences.
Section titles
Section titles group navigation items without nesting them. They’re helpful for grouping items that should always be visible within the menu.
- Use section titles to group items that should always be visible in the menu.
Nesting
Nesting items group links within collapsible sections. They’re helpful for more complex apps menus may benefit from limiting the number of links visible at once.
- Consider nesting items in longer navigation menus, as this can help save space and declutter the experience.
Do Nest items up to three levels of hierarchy to ensure users can access related content easily.
Don't Use more than three levels of hierarchy unless it can’t be avoided, as this can be overwhelming and hard to navigate.
Icon usage
Icons can be used in navigation menus to make scanning easier and reinforce familiar ideas.
- Ensure icon usage applies to all navigation items within the same hierarchy level. For example, if you use icons for some L1 labels, they should be used in all L1 items.
- Omit icons for nested items, but if they’re necessary, ensure all items within the nested level has one.
Behaviors
Scrolling
A scroll bar can be used if the navigation is long and doesn’t fit in one view. The navigation items will scroll, while the brand mark, application name, and any items at the bottom remain fixed in position.
Collapsed state
Vertical navigation menus can include a collapse button enabing users to expand or collapse the whole menu as needed.
- Consider implementing a collapse button if users would benefit from additional horizontal space in the main content area.
Chevron direction
Visually differentiate expanded and collapsed sections using the chevron direction.
Collapsed
Collapsed sections should use the downwards-pointing chevron to indicate collapsed content can be expanded.
Expanded
Expanded sections should use the upwards-pointing chevron to indicate expanded content can be collapsed.
Platform considerations
Mobile
Vertical navigation is recommended for web applications only. For responsive navigation on small screen sizes, or for mobile designs, consider using a Navigation drawer instead, which is prompted from a hamburger menu and overlays the page content.
Content
- Write all content in sentence case, except for acronyms or proper nouns, like the application name.
- Don’t use punctuation for navigation items.
- Ensure labels match page titles to enhance the user’s understanding of the site’s information hierarchy.
- Follow all best practices and guidelines implementing links. Reference Link for more information.
- Limit labels to a few brief words to prevent unnecessary reflow.
- Reference Grammar and punctuation to learn how to use parallel structure for consistent phrasing.
