UI Controls Dictionary > Vertical Navigation

Vertical Navigation


Vertical (a.k.a. "Sidebar") navigation is a way of showing a persistent site or application structure along one side of the product.

The macOS Human Interface Guidelines define it by saying "a sidebar typically consists of a table view or outline view that lets people navigate and select items to act upon in the main portion of the window."

Vertical navigation is used extensively on the web and is becoming much more common, almost standard, on mobile via the slide-out "navigation drawer" pattern.


When to Use Vertical Navigation

Vertical navigation, like tabs, is a member of Master/Detail family of patterns, which is described as "ideal for creating an efficient user experience by allowing the user to stay in the same screen while navigating between items."

Unlike tabs, vertical navigation is appropriate when the number of categories is not small, or is user-customizable (such as folders or tags in an email client). It is considered a "safe" navigation pattern because it is familiar, flexible, and doesn't take up much space. It is often used when there is no other obvious choice.

One primary reason not to use it is when horizontal space is constrained. This is why many websites (including this page) remove the vertical navigation for small screen sizes, replacing it with either breadcrumbs or the popular "hamburger" menu navigation pattern. The Material Design guidelines differentiate between four distinct variants, based on screen size and content: standard, modal, permanently visible, and dismissible.


How to Use Vertical Navigation

  • Highlight the selected page/item in the list. It should not be styled as clickable like the other items (even if it behaves the same).
  • Use titles to form logical groupings of related items.1
  • Clicking or tapping on category labels should expand or collapse that category rather than linking to its own page.
  • Keep the navigation link names short. They can be shorter derivatives of page titles themselves.2
  • Order the list according to what is most useful for the users of your application.3
  • Having hierarchical data doesn't mean that you must use a tree view. Very often a list view is a simpler, yet more powerful choice.4
  • In general, refrain from exposing more than two levels of hierarchy within a sidebar.1
  • The sidebar can be on the left or right side of the page, but it should be consistent across the application.
  • Consider what happens when the sidebar content is longer (taller) than the page content. Ensure that users can still access the entire list (i.e., scroll beyond the page contents).
  • Consider replacing the navigation panel with a slide-out panel on small screens or breadcrumbs on desktop displays.

Basic Usage

States

Like tabs, vertical navigation should have a clear selected state, usually achieved by making the selected item bold and/or highlighted. A hover state can also be useful.

Variations

References

  1. macOS Human Interface Guidelines
  2. U.S. Web Design System
  3. GNOME Human Interface Guidelines
  4. Microsoft Windows Desktop Guidelines


Further Reading


Leon BarnardBy Leon Barnard
Got questions or feedback? Email leon@balsamiq.com.