Vertical tabs

Use when

• You have a group of form elements that are often ignored by the user
  • Metadata elements
  • Elements with good defaults
• Situations similar to the "E-mails" settings on Configuration › People › Account settings

Example

Recommendations

• Group subsets of related settings together and put them into vertical tabs, where each tab provides a short description of the most important information on that tab. One vertical tab is active at a time, displaying its settings.

• Keep the description short, preferably 1 line.

• Don't use it for the main interaction in the form.

• Don't use more than 9 vertical tabs, because it takes up too much vertical space.

• Don't use fewer than 2 vertical tabs, because a fieldset would suffice.

• Don't use nested vertical tabs, it confuses the user.

• Don't use a pane that is too long, as the vertical tabs are meant to be in view with the content of the page to allow orientation.

• Don't use multiple sets of vertical tabs on one page, as they would look quite similar and users would get disoriented.

• Placing functionality which is part of a certain workflow within vertical tabs is; discouraged, the user should be able to skip the vertical tabs.

API

Drupal 7 (see also an example module implementing vertical tabs).

Problem it solves

A lot of metadata settings are presented on a form, but the user does not need to see all the settings all the time.