Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Our website has a global horizontal main menu that drops down to show all second-level navigation items.

We have requirements to build our website no wider than 1000px (according to web stats of visitor resolutions). We also have advertising requirements that force us to have a right hand column on every page.

I tried inserting a left hand vertical navigation to show all second-level navigation items, but this means that our main content column (between the left and right and columns) is too narrow for the graphs and tables (up to 11 columns) required on most of our products and services pages. The only option I saw was to remove the left hand column navigation to retrieve some of this space. The results are that I then had ample room for our graphs and tables.

What this means though, is that if a visitor is on a second-level or third-level page, the only way for them to access other second-level pages is by clicking on the main menu again and selecting a menu item.

What is the standard on always showing/not-showing second level navigation?

My concern is that for all of our non-products and services pages, a left hand vertical navigation may be ok because we don't need all of the horizontal space for tables and graphs.

share|improve this question
add comment

5 Answers

up vote 8 down vote accepted

Standard is a bit hard to answer, but a way to overcome this problem is to use a tabbed navigation breadcrumb approach. If you implement it, be consistent on every page even on the pages that could use the left-navigation.

Tabbed Breadcrumb navigation

Image from teehanlax.com

share|improve this answer
add comment

There is no absolute standard that I know of but here are two fairly standard examples of second level navigation.

Microsoft's ribbon: enter image description here

Superfish (based on the a-list-apart suckerfish article) system for handling 2nd level menus is pretty common in web design:

enter image description here

share|improve this answer
add comment

As already commented, there is not single best way. Here a few types of secondary navigation.


Submenu
Displayed on hover, although on click would be useful as well.
amazon



Jumbo menu
DIsplayed on hover, and the top category (e.g. Products and Services) is clickable as well and takes you to the corresponding page. That is different from Amazon implementation. cisco

Subtabs
Might not scale very well since all tabs have to fit horizontally without scrolling.
new york times

apple

Subtabs+Menu
Seems to be suitable when the number of subcategories is big. rei


Left navigation
Navigation remains constant and all of the categories are visible at once.
smashing magazing

share|improve this answer
add comment

I would:

  • use a horizontal submenu that sits below your global horizontal menu
  • keep the dropdowns on the global menu to allow users to jump to a subsection in a different section

In keeping with your space constraints due to the right-hand column ad, I think this pattern would work best.

Examples:

enter image description here

enter image description here

share|improve this answer
add comment

I would do a simple breadcrumb, like: "TopMenuItem1 > SecondLevelMenuItem3 > ThirdLevelMenuItem1".

The suggested "tabbed navigation breadcrumb" is not immediately clear to me and makes me think too much.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.