3

For a horizontal navigation menu with submenus, what is a good pattern to display when the number of menu items in the primary navigation does not fit the current page.

For the desktop view, don't think the hamburger icon is appropriate since it provides an all-or-nothing solution.

I could add a "more" link, but now how does a user know which page they're on and which option was selected? For the visible menu items, it's easy to show the selected one since it's still visible on the screen. Also facing the same issue for items selected in a submenu, which might link to other pages. How do i display where the user is on the page? Breadcrumbs? If breadcrumbs, then should be consistently applied for the rest of the application as well.

Any good patterns where i can achieve a good experience?

p.s. I don't quite like Amazon's implementation of one menu, and don't think it's very obvious what the selection. My menu wouldn't have as many variations/items as menu either.

6
  • How many navigation items do you have in your primary menu ?
    – Mervin
    Feb 9, 2014 at 18:54
  • It can vary. In some cases 3-4 items, in others 10-15.
    – ux guy
    Feb 9, 2014 at 20:04
  • So you want to show all 15 items even in a mobile view ?
    – Mervin
    Feb 9, 2014 at 20:13
  • Oh no, this only for a desktop view. I'm fine with the hamburger icon and a different view for mobile. I'm having trouble coming up with an elegant solution for desktop. I like the idea of moving extra menu items under "more" but lose out on the option selected.
    – ux guy
    Feb 9, 2014 at 20:17
  • Can you put these primary menu items under some sub category or super category
    – Mervin
    Feb 9, 2014 at 20:30

2 Answers 2

1

10-15 items in a horizontal nav bar is really too many. Scanning a horizontal list is much more difficult and less natural compared to a vertical list. Also it's likely that only at very large window sizes will you avoid the problem you're having now — not enough space for all the items.

So, first vote is work on the IA.

Second, re: "how does a user know which page they're on and which option was selected?" In my view a highlighted nav bar item should be only a helpful add-on to knowing what page you are on. That is, a user should be able to clearly see where they are on your site without needing to see the nav. The easiest way to do this is with large and clear headers on each page.

Breadcrumbs, as you suggest, are another common way of dealing with location. I think it is reasonable to have breadcrumbs on only one section of your site if that section is indeed much more complex than the rest of your site.

The case of subpages hidden behind menus shows exactly why you shouldn't rely on the nav bar to indicate where a user is on your page.

Check out USA Today's Sports page and use their sport sub-nav. While they do highlight if you choose a sport in the main top row, they don't do anything special if you select a sport in the MORE dropdown. The big text at the top of each section does the work and the highlighting of the nav is nice if it's there, but not that big of a problem if it's not.

So if the site itself (not the nav) is doing the work of showing users where they are you don't need to worry about the current page's nav item being off the screen or behind a "more" link.

Third: If you do need to put 10-15 items in a horizontal nav bar and feel nav-bar highlighting IS too important to hide the highlighting behind a 'more' link, then I suggest 1. alphabetizing the list, and 2. cropping the nav bar as needed and allow the user to slide the nav bar left or right with a mouse hover on either end. This way can make the current page nav item visible and allow them to access the rest of the nav. Alphabetizing is important because it will reduce hunting when trying to find the link you're looking for.

I'm not sure I've seen this done before — it would need some real world testing to see if people would intuitively understand it.

0

For desktop I would suggest the following. I would personally avoid having too many menu options immediately available limiting the number to let's say 5 or 6. To achieve that I would group similar top-level menu items into categories. Something like that:

Grouped menus

Now you can either choose a category or a page. Here's a sample layout for the second-level navigation:

Second-level navigation

You will need additional pages for categories and sub-categories to list all available options in that category/sub-category.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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