PSDFan Extra

Tabbed Navigation – How To Do It Right

Tabbed navigation is one of the most enduring techniques used within website design, and for good reason! Tabbed menus are generally clearer and more usable than many approaches, and have become conventional enough to be understood by almost all users.

It’s very important to have an ‘active’ state in your websites’ navigation, so that your visitors know exactly where they are within the site at all times. Tabbed menus are one of many examples that make use of this active state, but they are certainly one of the more effective methods.

Tabs generally tie into another part of the design (e.g.: stemming from a large content area, or the top of the website). This helps to give the overall design unity, and ties the navigation to the content visually. The result is that your user will instantly recognize that by using your navigation they will be effecting the content displayed. This may sound like a very simple premise, but believe me – I’ve seen some horrible navigation menus in my time that are simply unusable.

How to Get the Most From Your Tabbed Navigation

It’s no good simply placing any old tab into your menu and hoping for the best. You can follow the following guidelines when constructing your tabbed navigation:

• Generally a tab should contrast the surrounding background, helping make it clear and obvious
• The tab should be reasonably large in order to stand out, but shouldn’t totally overwhelm your other menu items (after all, you want your users to click them also).
• Make sure that your tab text stands out! I’ve seen a lot of tabs where the menu text is all the same color, so you will end up getting dark text against a dark tab. If you tab contrasts the rest of your backgrounds, then the text within this tab should contrast your tab background! (e.g.: use light text on a dark tab).
• Don’t forget about hovers! – Just because you have an active menu state in place it doesn’t mean that you can’t still have hovers for the rest of your navigation. I actually like to give my active tab a hover state still, so that users can interact with my entire menu.
• Think about where your tabbed navigation is drawing your user’s eye. Do you want them to look down to your content, across to the side of your header? Often subtle design elements such as arrows and gradients can help drive your visitors in the right direction

Some Awesome Examples of Tabbed Navigation

The great examples below should help you understand the benefits of tabbed navigation further. Why not try some of these techniques on your own site?

Popp

Popp uses quite a traditional tabbed navigation, whereby the ‘active’ menu tab is an extension of the content area beneath it. This active tab really stands out against a bold, colorful orange header.

Gras Groen

Gras Groen uses a slightly different approach to tabbed navigation. Rather than have the tab be behind the entire active link, it rests just beneath it, providing a more subtle, reserved approach. It is still perfectly clear which link is the active one though, partially through the sparing use of color.

Zahnke

Zahnke uses a really well designed menu tab. The tab not only sticks up from the content area, standing out by it’s use of color and attractive rounded corners, but also uses an arrow shape to point down to the content area. This arrow ensures that the tab is visually associated with the content below it, and it adds a certain depth to the header.

iBody

IBody uses another popular type of tabbing technique, whereby the tab comes down from the top of the header, rather than up from the main content area. In many ways this kind of approach helps draw the users eye naturally down the page, and is still unique enough to act as a design feature.

Root Creative

Root Creative uses another tab that comes from above the link. In this instance, rather than come down from the very top of the page, it is an extension of the large, colorful header area. Despite connecting the link visually to the header, rather than the content area beneath it, the navigation is still very clear, and the usability is spot on.

Bespoke Radio

Bespoke Radio uses a great tabbing technique. The tab stems upwards from the content area, yet rather than seeming to be connected to it directly, it sits behind it. This gives the layout much more depth, and the tab is still able to stand out by contrasting it’s bright blue colors with the gray header.

Perfectly Pretty

Perfectly Pretty is a very artistic design, which fits well it’s invitation service. The ‘home’ tab on this page is designed to look like a sheet of paper, sticking up from the prettily bordered content area.

Gami

Gami isn’t a very traditional tabbed approach, yet still has the feel of a tab, as the active menu button continues the lighting effects present in the site header.

Eton Digital

Eton Digital is another example of a site where the tab steps from the top of the site. In this instance, the top of the site is a medium-gray bar, which helps create a framing effect, giving structure to the rest of the site.

Bourke Design

Bourke Design uses a cool arrowed tab to draw the users eye down towards the main content area. Their design isn’t all that colorful, so the bright orange tab really grabs your attention.

We Are Hathway

We Are Hathway use a subtle tabbed approach, with a small arrow pointing down to the content area. The bright blue tab stands out against the dark gray backgrounds. The contrast of this tab makes it appear to be closer to use than the background, helping give the design depth.

Sprinklr

Sprinklr uses a yellow bar to connect to the menu tab. This helps create a sense of uniformity and structure. The tab is also the same color as the call-to-action buttons seen throughout the site, thus visually connecting it with purpose/action. The clean nature of this tabbed menu makes it highly usable.

Velvet Ink Media

Velvet Ink Media uses a tab stemming from the top bar in their header, which like some other sites in this article helps create a sense of framing the rest of the website. The dark gray tab is bold and stands out clearly. The font choice is large/bold, and helps make the tab very legible.

Hosting Logistixs

Hosting Logistixs uses quite a 3d looking tab. The tab stands out by it’s use of rounded corners, gradient background, and subtle arrow effect. Each of these design aspects make the tab stand out as a visual feature, and it’s size helps it appear to be in the foreground, whilst the rest of the menu sits behind it.

Yozenn

Yozenn uses a really fun menu tab, that fits with it’s lively, enjoyable browsing experience. The tab is connected to a bright top bar, and is filled with a pink gradient, that gives it a kind of ‘bubble’ effect. The use of a drop shadow helps give the menu depth and make it more prominent.

Related Posts

• Thursday Theory: The Importance of Perspective and Depth in Your Designs
• Thursday Theory: What Makes Great Typography?
• Tabbed Navigation – How To Do It Right