We have these few pages that have an inner navigation but for some pages, the number of items is very large. For some pages, the number of navigation items is small.

See below for the ones with a long list of navigation (small white rectangular boxes on the left):

enter image description here

Currently, the items are split into three lines but this looks very cluttered. Is a drop-down a better approach for the pages that have a long list of navigation? Just thinking if there would be a bit of inconsistency because the ones with the short list are listed as a normal navigation but the ones with a long list are listed as a dropdown.

Any better way to approach this?

  • 2
    Have you considered looking at the core issue rather than the layout - namely, addressing the IA of this. Does your site really need so many subnav items? Can't they be organised into different categories or groups?
    – JonW
    Commented Jan 28, 2016 at 10:35
  • 1
    @JonW Currently, all the sub-navigation are needed and before we can propose a better IA, we need to have a quick patch for this cluttered navigation first. Commented Jan 28, 2016 at 10:40

5 Answers 5


I'm going to attempt to solve this. Here is what I proposed:

Proposed Sub Navigations


download bmml source – Wireframes created with Balsamiq Mockups

You could use a combination of direct links and a drop down menu to maintain consistency. Ideally drop down menu should be reserved for recurring items/actions such as as "Upload, Print..". The direct links surface paths which are more important to the user.


It's hard to provide a reasonable solution without exactly knowing what content you have on this sub navigation's. It would be great if you can provide more information.

Anyway here are some basic ideas you may want to consider:

  • Use icons instead of long names
  • A vertical navigation on the left side
  • A dropdown as you suggested yourself is also an option as well as a multi-column dropdown.

As your question highlights, we can't always live in a perfect world. Sometimes there are just a lot of points in the navigation. I've had to deal with this in both consumer and enterprise contexts, and I'm happy to say I've found a simple solution that works.

For the main nav, stick with the well-proven horizontal top bar or tabs. For the subsections, use a vertically stacked nav on the left. This makes the subsections easily discoverable (compared to top menus) and provides plenty of real estate.

In some contexts, I've taken over that left column to enter "focus mode". To return to the full subnav, the user only needs to move up a level in the hierarchy.


I would investigate a combination of a "mega menu" and in each section have the navigation listed in the footer. This way, as the user navigates the various pages in a given section, having read top to bottom, they can navigate to the next page using the bottom footer.

Footer would have each of the sections listed horizontally and level 2 subpages listed below.


I think it would not hurt to add some sort of a search box - experienced users could just type what they need and only matching nav items would pop up.

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.