Navigation has always been a design problem for large websites. Mega drop-down menus are a growing trend in web design that structures navigation choices through layout, typography, and sometimes icons.
Mega menus can greatly improve navigation and usability on sites that involve a lot of pages or products. With mega drop-down menus, a visitor can see all their choices at once. For bigger sites with many features, regular drop-down menus typically hide a lot of your site’s content. You can scroll, but this becomes confusing and hides a number of choices at any given point in the navigation process. Mega menus show everything at a glance and through grouping, allows your visitors to visualize the relationships among items on your site. CSS-only dynamic drop-downs are possible, but they don’t offer mouse over/out latency or work in every browser.
While mega menus can make it easier for users to find the information they’re looking for deep within a site, a vast number of links can also overwhelm some visitors. Mega menus can help streamline the navigation process by allowing you to group menu items. Chunk options into related sets using concise, yet descriptive labels for each group. Try not to offer huge groups of options that require a lot of time to scan. At the same time, don’t make the groups so small that the menu has an overabundance of groups that your users have to spend time understanding.
Just because you can put everything in a mega menu doesn’t necessarily mean you should. The standard usability guideline to “keep it simple” also applies to mega menus. Avoid GUI widgets and other interface elements that involve a lot of interaction. Mega drop-downs are temporary – They appear on hover or click so shouldn’t replace dialog boxes, which should be used for more complex interactions. Even though mega menus have the room to support many options, it’s best to try not to overload your users.
From a design standpoint, mega menus can look great and allow you to further express your brand’s personality and creativity. These drop-down menus are a design canvas! They eliminate unnecessary scrolling and offer additional elements such as typography, icons and tooltips to help guide users to the content they came for.
Mega menus are common on e-commerce sites because they typically include many categories of products. They’re also useful on other large websites where fewer clicks should be necessary to get to a specific page. Mega menus allow visitors to reach the content they’re looking for no matter where they are on your site.
Your site may benefit from a mega menu if:
- You manage a large number of products (eCommerce sites like REI)
- You publish and manage a lot of content (content aggregators and news sites like Reuters)
- You have complex service offerings requiring a lot of supporting content (large association sites, higher education sites like Cornell, government sites like The White House)
- Your site is information-oriented, diverse, and you offer a lot of long-form web copy
You probably don’t need a mega menu if:
- Your site is small without too much content (small businesses, restaurants)
- You have fewer pages and focused content
- Your site is dedicated to a singular function, such as a tool or online calculator
Be warned: The increased ability to navigate a site will come at a tradeoff on the SEO front. Too many navigation links in a mega menu may dilute your site’s overall page rank. Google assigns a PageRank score based on the number and quality of links pointing to a webpage. A site’s internal link structure transfers PageRank throughout the site. When you distribute a site’s PageRank in a “broad” way, you dilute the page’s ability to rank competitively in the SERPs. Sites with weaker trust and authority metrics will suffer more than established sites with strong authority and trust metrics. Shoot for 100 links or less, but keep in mind that there are occasions where the SEO hit will be worth it.
Navigation has a huge impact on your website’s usability and appearance, so make sure you have the right menu for your site’s content, layout and visitors. This article features several free and premium WordPress plugin options that can help you create a responsive menu, or make your existing navigation compatible with mobile devices.
Want more? Sign up to get our newsletter delivered to your inbox the first Thursday of every month. Receive links to the latest web-related articles, best practices, and thought-leadership commentary.