In this guide I’ll cover a handful of design techniques for building usable dropdown navigation menus. This includes multi-level dropdowns and mega menus which all rely on the same core design principles.
It’s a good idea to include markers for links that have sub-menus attached. These small visual indicators let users know where links are placed and how to access them.
And these rules apply to all menus whether you’re designing with 1 tier or 4 tiers of links.
Markers can range from arrows to dots or squares or anything noticeable. Most users are smart enough to pick up what the symbol means, so long as it’s universal.
The Threadbird navigation is a fantastic example of this effect in action.
Some of their links have sub-menus while others don’t. In fact some of their links have sub-sub-menus which you can only discern by their unique marker next to each link.
Threadbird uses the right-pointing double angle quotation mark, simplified to raquo. Web designers prefer this symbol over a single arrow because it’s bulkier and easier to notice at a distance. Plus it holds its shape well even at smaller sizes.
You can find a similar design on the TutsPlus navigation. They use downward-pointing arrows for dropdowns and right-pointing arrows(closing point brackets) for the flyout menus.
One thing I don’t like in this design is the sub-menu arrow style. The arrow icons only appear while hovering a menu item, even though all the other links have submenus too. Good design practices would encourage keeping these arrows visible at all times.
But I do like the simplicity of the TutsPlus design. It’s a perfect example of how tiny little markers can go a long way towards better usability.
It drives me crazy when I see designers misusing space in their navigation.
With margins you need to click/tap on the actual link text. The clickable area is only as large as the text itself. But with padding you can make the entire area clickable meaning the user has a much larger target. In the context of menu links I’d argue larger is always better.