Web design is a field that offers extensive diversity in terms of navigation and otherwise. With this post we will explore tabbed navigation, which helps create well-organized and neat web page layouts. Before delving into the intricacies of tabbed navigation, let’s understand what tabbed navigation is - it is a navigation style that operates mainly through a group of buttons that are usually arranged horizontally at the top of a web page.
This navigation style comes handy when there is a need of switching between various panes quickly or of organizing huge amounts of data in one place. The tabs follow certain styling guidelines like, the active tab is highlighted whereas the inactive ones aren’t so that users can clearly ascertain what tab they are on. Also the tabs are either attached to the containers or stick out a little from the container so that they are distinctly visible to users.
Here are a few examples of sites with good tabbed navigation
Source: http://www.think.edu.au/
The tabs offer extensive sub navigation, the pointer and the distinct colour of the active tab make the site look clean and help define which tab is active with ease.
Source: http://roadtrips.southaustralia.com/
Tabs in different colours and shades along with well designed icons make this site simple to navigate.
Volvo Trucks: Asia 360º | Perspectives of Progress
Source: http://perspectivesofprogress.com/#!/en
These tabs are beautiful styled with a shadow effect that helps separate tabs effectively and makes the layout look clean and uncluttered.
This site has well defined tabs complete with a border. The container and the active tab merge and have the same colour highlighting the active tab well.
Hot trends in tabbed navigation
Vertical tabs
Vertical tabs are usually considered a hindrance to the UX, but if designed properly vertical tabs can do wonders to your navigation and layout. But you need to be careful that on each page the window is enough for you to include all your navigation options. The webpage given below is an excellent example of well-designed vertical tab navigation.
Source: http://www.buntspenden.de/en
Handwritten tabs
Handwritten fonts, tabs and navigation are all over the web. As this style is very relatable and creative it has a unique appeal to it.
Source: http://www.ronaldocardoso.com/site/
Descriptive Tabs
Sometimes if the tab text is in 1-2 words, understanding the content of the tab can be difficult. To resolve this issue a subtitle of sorts is included in the tab itself to explain what content users should expect from the tab. Such tabs can be called descriptive tabs. This sort of tabs should only be included if they suit your site contextually, preferably tabs should have text as concise as possible.
Source: http://worshipleaderinsights.com/
Interesting jQuery tabs plug-ins
Hash tabs
Hash Tabs is a jQuery tabs plug-in for creating tabbed interfaces that support hash-friendly URLs and comes with tons of CSS3 powered animations. If you want to implement this for your next navigation go to https://github.com/srsgores/jquery-hash-tabs/
Droptabs
If you build sites using Bootstrap, then this is for you. This jQuery plug-in lets you hide Bootstrap tabs inside a dropdown, when the viewport is too small. Here’s where you can find droptabs https://github.com/pippogsm/droptabs
Codetabs
Codetabs is a plug-in for tabs + sliders. Using this plug-in you can move between slides with ease on desktops and mobiles by integrating gesture swipe. It includes over 250 out-in effects, built-in responsive features, vertical tabs and much more. For more details you can visit http://bit.ly/1pX4keb
Some other sources for inspiration on tabbed navigation
Responsive tabbed navigation
Responsive designs are a must and have become almost a regular practice due to the heavy use of devices of different sizes. The same theory applies to tabs as well. There are methods that allow you to design responsive tabs that can resize and arrange themselves as per the size of the device. One such source code can be found on http://codyhouse.co/gem/responsive-tabbed-navigation/
SVG and CSS tabs
A collection of varied styles and effects for modern tabs can be found on http://tympanus.net/codrops/2014/09/02/tab-styles-inspiration/. Based on your layout and design you can choose from simple boxes to SVG shapes from this collection to add some zing to your tabs.
Using these plug-ins and resources you can develop nifty tabs that enable easy and quick navigation, which is extremely essential for a good UX. Do you plan to use the tabbed navigation style for revamping your site in 2015? What all features do you want to integrate into your tabs?
Let us know through your comments!
Webby Monks
Latest posts by Webby Monks (see all)
- Trouble organizing your CSS? 6 handy tips to consider! - April 20, 2024
- Interaction Design – How to direct the audience in few easy ways? - April 15, 2024
- Infographic – Google’s new mobile friendly algorithm: 81% of sites under the lens! - April 8, 2024
