Vertical bar/sidebar navigation is when navigation items are arranged in a single column, one on top of another. It’s often found on the top-left column, preceding the main content area — according to a usability study on navigation patterns on left-to-right readers, vertical navigation bars on the left performs better than vertical navigation bars on the right.

The vertical bar/sidebar navigation design pattern is seen all over the place, on virtually every kind of website. Part of that is because vertical navigation is one of the most versatile patterns out there, able to accommodate a long list of links.

Drawbacks of Vertical Bar/Sidebar Navigation

Vertical menus, because of their ability to handle many links, can sometimes get overwhelming to users when they are too lengthy. Try to limit the number of links you include, and instead, use fly-out sub-navigation menus for sites with more content. Also, consider dividing the links into intuitive categories to help users find links of interest quicker.

Vertical navigation is suitable for almost any kind of site, but especially sites that have more than a handful of main navigation links.

Tabs navigation can be styled virtually any way you want, from realistic, textured tabs that look straight out of a notebook to glossy, rounded tabs and simple, squared-edge tabs. They’re seen on virtually every kind of site, and can be incorporated into almost any visual style. 


The biggest drawback to tabs is that they’re more work to design than simple top horizontal bars; they generally require more markup, image assets, and CSS depending on the visual complexity of the tabs.

The other drawback to tabs is that they don’t work well for navigation with a lot of links, unless they’re arranged vertically (and even then, they can look awkward if there are too many).