Problem

The user needs to navigate among sections of an app while having clear indication of what section the user is currently looking at.
To access information from the same page/layout and randomly without a specfic order.

Solution

A series of list items arranged horizontally to form tabs which when selected, reveal a pane of associated content.
Provide clear indication that a sub-menu has been selected, by change of color or other visual indications.
Display additional information on the tabs about updated data pertaining to the tab.

How to Use

Horizontal tab

If the number of topics are less than four, then use horizontal tabs.
custom_tab.png

Vertical Tab

If the number of tabs are more than four , use vertical tabs to accomodate more options.
horizontal_tab.png

Considerations

  • Avoid using multiple levels of tabs, as it can be overwhelming in a small area of space.
  • Make sure to keep tab names short else it will make navigation between tabs difficult.
  • Avoid using different design elements across the tabs so as to make the whole experience more cohesive.