Tabbed navigation vs sidebar

Jan 21, 2016

Websites and apps often need some sort of navigation system to allow quick switching between main sections. Horizontal tabs and vertical sidebars are often used to solve this problem. Both are widely used and come with their own pros and cons.

Any website or application with a rich set of features should bundle them together in separate sections. For example, an email client application may have separate sections for showing inbox, sent emails and drafted emails while a news website may have national, financial, sports and weather news sections for different kinds of news.

Once the features are seprated in sections, a navigation system is needed to allow switching between sections. This is often solved on the UI level, employing either the horizontal tabs or vertical sidebar design pattern.

Horizontal tabs

The horizontal tabs are seen as a list of options presented side by side. The tabs are frequently seen at or near the top of the screen. But they can be placed at the bottom of the screen, too. It works really well for showing a small number of options within a limited space. Many mobile apps, including the mobile version of popular social networks, have successfully used this UI design pattern. On a mobile screen, all the tab items retain the same level of thumb access.

However, horizontal tabs are always under strict space constraint. Only a small number of items can be shown withouth scrolling. If icons are to be shown for each item, then icons compete with labels for space. The labels could be removed altogether if the icons are obvious. Showing sub items is also tricky - the pull down menu also competes for space.

Vertical sidebar

The vertical sidebar is seen as a list of options presented in a top down manner. The entire list can be placed against the left or right edge of the screen. Unlike the tabs, the sidebar does not suffer from strict space constraint. More items can be accomodated in the sidebar while using only a fraction of the available horizontal space. Icons, sometimes a badge as well, can be accommodated. Nested list of sub options can be presented with appropriate color and/or indentation.

If the langauge of your app/website is read left to right, the sidebar fits well against the left side of the screen and vice versa for right to left langauges. Sometimes the opposite side works, but that is more of a design exception.

The sidebar may be seen as a problem for mobile screens because it has the potential to consume a large part of the screen. This is easily solved by hiding the sidebar behind a swipe action or under a hamburger menu icon.