3 Ways to Organize Large Navigation Menus

by on 09/14/10 at 3:40 pm

Most websites with large navigation menus display many items simultaneously. This is overwhelming for users if the items aren’t organized in a clear and intuitive way. By not doing so, you could frustrate users with your navigation. It’s important to structure your navigation menu in a way that allows users to easily and clearly see the main and sub-items in your menu. There are three ways you can do this.

1. Go from main to sub-navigation

This approach makes good use of progressive disclosure. When users click the main item, the website takes them to the main item page. When users are on the main item page, the sub-items display in a vertical left-hand sub-navigation when users can select a more specific item. This approach allows users to navigate in a progressive step-by-step fashion without immediately jumping to a sub-item. The only drawback to this is that you lose some left-hand space on your pages to make room for your sub-navigation.

2. Use disclosure arrows for sub-items

This approach allows for both novice and power users to navigate. Novice users usually need to view the main item pages first to get an overview of the content before they pick a sub-item. This is why you make the large part of the button a clickable link to the main item page. Power users likely know what they’re looking for already and want to get to a specific sub-item fast. This is why when users click the disclosure arrow the sub-items will expand and display. This approach works well if you have a mix of novice and power users, and want to offer controls for both audiences.


3. Put your main item first in the menu

This approach allows you to use a roll-over drop down menu. However, the only difference between this drop down menu and your normal one is that the main item page will come first in the menu, followed by the sub-item pages. This works better than normal drop down menus because there is a clear and distinct link to the main item page inside the menu. Normal drop down menus would typically hide the main link outside of the menu and within the tab. With this approach, you’ll have to give your main item page a name that communicates the generality.

Using any of these three approaches will help get users to view your main and sub-item pages. Each approach makes it clear to the user where the main items and sub-items are, so that there’s no confusion where users can navigate. When you organize your menu in a clear and intuitive way, you give users the freedom to choose where they want to go.

Interface Libraries

Interface Papers

Interface Styles

Leave a Reply