Webby Monks

The Blog

Digital agencies' best practices about modern web development, digital and inbound marketing.

Get Inspired with these Heavenly Tabbed Navigation Resources

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

Think Education

Think EducationSource: 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.

Road Trips South Australia

Road Trips South AustraliaSource: 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

Volvo Trucks: Asia 360º | Perspectives of ProgressSource: 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.

Tumblon

TumblonSource: http://tumblon.com/

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.

www.buntspenden.de/enSource: 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.

www.ronaldocardoso.comSource: 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.

worshipleaderinsights.comSource: 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!

 

The following two tabs change content below.
Webby Monks, a sister concern effort of Email Monks, offers a great deal of PSD to interactive HTML conversion services blended with interactive library of 100+ interactive components enabling clients to pick and choose best interactive components while placing a PSD to HTML conversion order. Some of our USPs include quick turnaround time, W3C validated end product, robust technological competency, 100 % money back guarantee like Email Monks, 100% hand coded HTML, multi-browser compatibility, clean and commended markups and comprehensive workflows.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get your One time On-Page SEO with Monks

WCAG

Monks are expert in thorough SEO practices. Simply fill up the below form to optimize with us and get maximum results on page performance.

Thank you

We use cookies to improve your online experience and the service we offer. If you continue to use this site, we’ll assume that you’re happy to receive all cookies. Read our privacy and cookie policy