Mega drop-down menus are a relatively new phenomenon but I predict they will be everywhere within six months.
Navigating large websites has always been a design problem. You could create a huge sitemap-like menu with links to every page, but it would become impossible to scan and grow increasingly large as more pages are added.
In general, designers choose either:
- a small simple menu that links to pages with additional navigation as you delve deeper (Sitepoint is a good example). These are easy to use and accessible, but multiple clicks can be required to reach the content you want.
(* CSS-only drop-downs are possible, but they do not offer mouse over/out latency or work in every browser … guess which one!)
Mega drop-downs are half-way between the two concepts and similar to the ribbon introduced in Microsoft Office 2007:
(example from actionenvelope.com)
The features of a mega drop-down menu
Typically, a mega menu:
- is a single drop-down that appears on hover
- shows all the options in one large panel
- groups options into related categories
- uses icons or other graphics to help the user.
Why mega menus will become popular
There are several reasons why mega drop-down menus will become a mainstream feature of many websites:
- They offer a good compromise between simple and expanding menus.
- They are easy to use and should suffer fewer accessibility problems.
- They look great and give designers more scope to express their artistic creativity!
Perhaps the most compelling reason: Jakob Nielsen approves of mega menus! The web usability expert is usually critical of most design widgets, but he thinks mega menus are a great idea and suggests designers try them to improve their website’s navigation.
What do you think? Will mega menus become ubiquitous? Are you using them already? Will you try them on your sites?