Tabbed navigation
One navigation metaphor that is sometimes used for the main navigation is to simulate the effect of tab pages in a ring binder. When you click a tab on a wcb page, the idea is that it should look like you have brought its page to the front of the screen.
Here is an example created using a free demonstration file from www.dhtmlgoodics.com:
- The metaphor is well understood by visitors, and can be effective in defining the boundaries of different sections of your website. To make the most of the tabbed navigation metaphor:
- Make sure you create the illusion of the tab being joined to the page below. You can do this by using the same color on the tab and the content beneath it, and a contrasting color on other tabs. It’s okay to change the color of a tab to highlight that it is the current page.
- Have one of your tabs selected when people arrive at the homepage, to show the metaphor working from the start of their visit.
- Make sure that the text is clear and legible on every tab. If
there isn’t room to make the tabs big enough to be clear, then restructure the navigation. Don’t shrink the text. - Use spacing between the tabs and rounded corners on them,
to create a sense of separation between your website sections.
As with any navbar, your tabbed navigation should look and work consistently across the website.
The following two tabs change content below.
We are a creative WEB-DESIGN Agency based in Los Angeles. We build Responsive, Mobile-Friendy & SEO Optimized Websites. Best Prices on the market!
We’ve been increasing conversions and sales on websites for over 15 years – and with some fantastic results!
Latest posts by WebWorks Agency (see all)
- WebWorks Agency Celebrated as a Leading Small Business Web Designer for 2019 - June 24, 2019
- 11 Google Tools You Should Be Using To Improve Your Business Marketing - April 14, 2019
- 7 SEO Trends You Need To Be Aware Of - January 20, 2017
- SEO Trends To Watch Out For In 2019 - January 20, 2017