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.