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 “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: permanent, persistent, mini, and temporary.


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. (macOS Human Interface Guidelines)
  • Clicking or tapping on category labels should expand or collapse that category rather than linking to its own page.
  • Keep the navigation links short. They can be shorter derivatives of page titles themselves. (U.S. Web Design Standards)
  • Order the list according to what is most useful for the users of your application. (GNOME Human Interface Guidelines)
  • 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. (Microsoft Windows Desktop Guidelines)
  • In general, refrain from exposing more than two levels of hierarchy within a sidebar. (macOS Human Interface Guidelines)
  • 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 (i.e., the “temporary” variant here) or breadcrumbs on desktop displays.

You can find some good web examples here.

Basic Usage


Types of Vertical Navigation

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




Edit this page