Navigation Vertical

Definition of objectif

The user needs to navigate through a site to locate information and features and have a clear view of their current position in the site. The navigation can have few or a lot of categories.
Why use more than 1 level of navigation


The question here is not if the navigation has to been horizontal or vertical. The tabular metaphor is well-known in user interface and facilitates easy navigation between groups of information. By showing the current position in the two topmost levels the users know where they are and can also jump to other categories.

Use When

  • Tabs provide context. They offer the ability to give visual indication of a user’s location within a body of information.
  • Tabs provide navigation. They provide the ability to navigate the site.
  • The number of elements in the toplevel and in the second level each are less than 10.
  • The category titles are relatively short.
  • Users want to see where they are now.
  • You need to indicate the user’s current location in the set of available options.
  • Users want to know how to get back to the main page


  • Present a single-line row of tabs in a horizontal bar under the site branding and header.
  • The first tab in the top-level is reserved for the home page if there is not any other « Home » destination.
  • When the list of categories becomes too long, consider using a vertical navigation.
  • The selected tab should come forward in terms of prominence from the other tabs. Unselected tabs should sit back visually to reinforce the notion of where the user is via the selected tab.
  • The page that is delivered by selection of the tab should be visually connected to the tab via design cues: color, brackets, borders etc. Selection of another tab redraws the entire page and presents the new information tied to the new selection.
  • Never stack multiple rows of tabs as this leads to confusion about the selected layer versus inactive layer.
  • The topmost tabular is always visible while the other tabular changes depending on the current top-level selection.

This pattern from other collections


Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:


Vous commentez à l'aide de votre compte Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s