Tabbed navigations are very useful when you need to organize a considerable amount of side content. It’s very common to use tabs in a product page, for information like delivery options, product material info etc. Another use of tabs is in dashboards, where users need a quick way to switch from one panel to the other.

The code behind this snippet is very straightforward. Mostly CSS, plus a bit of jQuery to animate content height. The interesting point is the way we handled the user experience on small devices: in order to allow users to have as many buttons as they want, we decided to let the navigation scroll horizontally on small devices – instead of hiding it completely or firing a drop-down menu.
Icons credits: Vicons by the talented Victor Erixon.


Demo Article