Best practices of navigation: how to build your sidenav and megamenu

When we talk about navigation, we're either referring to your

  1. side-navigation, or "sidenav", and
  2. Your top-navigation or "megamenu".

How can you make your sidenav or megamenu effective and help your users find their desired path through your site?

Good idea: having a small amount of links in your navigation. Less than 6 is ideal

When we talk about navigation, we're either referring to your 1.) side-navigation, or "sidenav", and 2.) Your top-navigation or "megamenu".

Navigation with a small amount of links does lots of great things for your site and for your organization. 

  • Helps you prioritize what's important
  • Helps visitors find the path they're looking for more quickly.
  • Encourages serendipity

We have all been to websites with superlong navigation menus, top-navs 3 dropdowns deep, etc. Here's the thing: if someone knows exactly what they're looking for they're going to use your search bar or use a pre-saved bookmark to get to where they want to go. They're not going to suffer through the 72 item-long menu you have to find the link they need. This is for new visitors and to encourage serendipity - allowing visitors to find even more than they were looking for - in your returning visitors, so make sure you're catering to them with simple navigation.

Bad idea: having more than 6 links in your navigation

Your side-navigation is not a "table of contents". Research shows that humans, on a good day, can front-load 6-7 small ideas in their brain at one time. This means if you have 10 or 15 (or 74...) items in your sidenav, a person will have to read your sidenav multiple times to fully comprehend and make a selection, whereas if you have 6 or less, they'll only have to read it once, maybe twice, and find the path they need to take much, much faster.

What should I do if I have more than 6? You can create inner pages which contain more of the items you were trying to link to in your sidenav, which can have their own items within that page or in its own sidenav (follow that link for more info on how to implement that). 

More bad ideas for your sidenav or megamenu

  • PDFs, DOCs or other files which require a download to view. 
    • This is not expected behavior. Regular visitors and especially those using accessibility tools to browse your site will feel like you're hijacking their browser and will lose confidence in other links on your site.
  • Externally linking from your sidenav
    • In a navigation bar, unless you make the visitor completely aware, you should not link outside the current website. That can be done within a page, and making sure you've told the visitor what the link is going to do.

What you should do

  1. Keep it short (but not too short. Aim for 6.)
  2. Keep the sidenav/megamenu links within your current website
  3. Put document links (PDF, DOC, etc) within your pages, not in your navigation
  4. Utilize other navigation on your "inner" pages of your site to further direct your visitor's path 

More Help Center articles

Want to see this in action? 

Re-watch this video segment from our Basic Web Editing training video.

Was this article helpful? 1 out of 1 found this helpful

Have more questions? Submit a Support Ticket