I would like to know how we can best represent a webpage with 50 sub menus or more without scrolling the page. Currently, I have implemented a side menu which pops out on click of the hamburger icon. Any suggestions would be appreciated. Thanks.

  • 8
    Best practice: don't have 50 submenus. Sounds like you ought to restructure the site. – user31143 Jun 10 '16 at 10:28
  • Why don't you want to scroll the page? It may be that scrolling turns out to be a perfectly good option. Don't close off potential solutions up front. – JonW Jun 10 '16 at 12:13

What you could do is group your categories by major themes and use a similar style as bestbuy.com where categories appears in a dropdown and when you go above one category, the window expands and shows other relevant categories based on that theme.

bestbuy dropdown layout

| improve this answer | |

While I agree with @dan1111, one alternative, I can think of is a Chris Coyer's implementation for big drop down.

You can see the example below:


But honestly that would be an unfamiliar behavior for the user and that cannot happen inside a side menu.

The other thing is sidr.js which you could see been used here, http://www.uscourts.gov/ If you click you can have the drop down load horizontally

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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