The principle argument about drop downs fall into two camps, the designersÂ who are often for them because they are a good way of using space and making the layout “tidy”; and the usability types who are against them because they can be confusing, dysfunctional when there are tiered levels and hard to use for mobility impared users.
Example 1 of a mega drop down navigation box
Mega drop downs have the following characteristics which make them better:
- all secondary and subsequent navigation items are visible, there is no hovering and then trying to “catch” the tertiary level in the next pop up navigation box
- it allows greater structure for the layout, better use of typography, space and even graphics
- all navigation items are visible at once
- they can be used as drop downs or activated from side bars as “mega fly-outs”
Example 2 of a mega drop down navigation box
Why mega drop downs are better than regular drop downs:
- for bigger sites you need to scroll which hides the initial options
- mega drop downs support easy and obvious grouping
- you have a richer typography to help the user
- you can use imagery such as icons or pictures to support your navigation
Points to bear in mind with mega drop downs:
- speed is important, so ensure the interface elements display quickly
- allow some latency (e.g. 0.5 seconds)Â after moving from a nav item to allow the user to move to the sub nav without activating a neighbouring top level nav item if it passes over it on the way to a sub nav item.
- keep it simple, just because you can put anything in a mega drop down doesn’t mean you should
Remember to code with screen readers and assistive technology in mind. There can be issues for people using mobile devices or people using screen magnifiers as the enlarged part of the menu may appear to be the only part of the menu. One way to help is to have strong visual signals for menu borders so people can follow them when they are enlarged.
And remember the standard rules of accessibility, don’t make clickable items too small, or too gimmicky.
Options for improving accessibility
See more from Jakob Nielsen to understand the finer details of mega drop down accessibility