Responsive Menu that has a LOT of menu items

Question

We have a responsive menu that on mobile just shows the top-level menu items (x8), but on desktop also shows hover dropdowns with service areas within the parent menu item.

The problem is we need the ability to show another level of navigation with the actual services within that area.

Here is the link: http://www.irwinmitchell.com

An example scenario would be:

Personal Legal Services
  >  Administrative & Public Law
       -  Disability Law
       -  Education Litigation
       -  Prison Law
       -  Professional Regulation and Discipline
       -  Social & Healthcare Law

So a structure like that needs to be shown for all the service areas within the main navigation.

Has anyone been presented with this problem before, or have any ideas what the most usable way would be to present further sub category's into the navigation?

Answer 1

As others have pointed out, you have a huge menu, and no matter how you style it you're probably losing customers who don't want the hassle of reading through 20 menu items to work out which one is best suited for them.

Assuming you have to have a 3 level menu though:

On mobile you can have a Menu link which opens up a scrollable menu list. When an option is clicked, you slide that set of menu options off the screen to the left and show the sub menu options in another scrollable list. You can repeat the same for a third level. Scrolling lists like this is very common on mobile, and this experience is probably better and more familiar than any desktop experience you can create.

On desktop, 3 level navigation is uncommon. If sites like Amazon, eBay, Microsoft and Apple can create sites with only 2 levels of navigation, you have to ask yourself why can't you. I would keep "Administrative and Public law" as it is (as a link to a new page) and include the children of that on the new page. When you click "Mac" on Apple.com, you're led to a new page and presented with what are essentially sub-categories but as large thumbnail images and text at the top. This is easier and less fiddly to navigate than hovering over menu items and then sub menu items:

If you really need to do 3 levels of navigation on desktop though, you could do something like Amazon, where you have multiple instances of their 'Shop by department' for 'Home, Personal legal Services, Business Legal Services, Our People, etc'. So, click a main menu item and see a single column list with small line-height for quick scanning, then hover over one of those to explode another sub-menu on the right.

Answer 2

Multi-level dropdowns are an engineered solution to the problem of having too many menu items. The best solution to the problem is in fact to simplify the menu structure in the first place. If you really do require so many menu items then it's probably better to split them using sub-menus.

I like to think of complex nav as being like the guide in a department store; they don't hit you with a list of every item in the store. When you walk in you get the top-level of navigation only; menswear, home appliances, furnishings, etc. Upon navigation to that section, you receive further intra-category navigation; shirts, suits, trousers, etc.

Such a pattern allows a user to very quickly make correct decisions and to subsequently refine those, relieving them of the need to process every option before selecting the appropriate one. Make it easy on the site visitor, don't make them think (too much).

Answer 3

I would view this similarly to traversing a tree. On each node, you can view the children or go back to the parent to view the siblings. Presenting your navigation like this would mean you don't need to show a second level of depth on any one page. It might necessitate more user clicks, since the overall navigation space will be progressively revealed, but it should work well for small form factors. I guess my short answer is that you shouldn't present a hierarchical menu when you don't have the space to support it.

BTW, I'm hoping someone else responds to this question and proves me wrong by showing a really elegant way to do this.

Answer 4

I've created responsive solutions for dropdowns and mega-menus for an upcoming UI framework that I'm going to be releasing. Having looked at your implementation, here's what I would suggest based on my own work:

• Move the mobile menu bar to the top of the page. It doesn't need to be fixed, but it should be the very topmost UI element. If it is fixed, allow scrolling on menu expansion, but revert to fixed when it is closed.
• Move the menu button to the right and add a small version of your logo to the left of the menu bar. Either get rid of search, integrate it into the menu, or give it its own expandable area triggered by a button in the menu bar.
• The initial view of the expanded menu can be similar to what you have, but I would make it 100% width and rotate the arrows 90 degrees so that they are pointing down. Only menu items with sub menus should have arrows.
• Add a click event to the parent menu item to toggle the sub menu. The sub menu should at least be visibly indented and it may help to make a different color.
• I would not recommend have more than one sub menu level for either desktop or mobile.
• Only allow 1 sub menu to be displayed at a time.

Here's an example of what I did, with an explanation below:

1. The normal desktop functionality.
2. The menu is collapsed on mobile and replaced with a menu button.
3. When the menu button is clicked or touched, it expands the menu. (The menu button isn't shown because there are a lot more menu items above these three.)
4. When the dropdown menu item is clicked or touched, it also expands.

Answer 5

If you look at the 'browse' menu on the link below, you will notice at the bottom of each list a 'view more' link. When clicked, all the links for the given section are displayed.

http://artsy.net/

I wonder if you could display the child links with a similar approach, maybe a drawer toggle?