Deutsch

A mega menu is a website navigation element that opens a large panel with many links, usually grouped in columns, when a visitor hovers over, clicks, or taps a top-level menu item. For SEO, every entry is an internal link that appears on every page that uses the menu.

Where are mega menus used?

They are common on online stores and large corporate sites with many categories. The Nielsen Norman Group describes them as two-dimensional dropdowns that show lower-level pages at a glance. Its guidance recommends grouping options by how users think about them, listing each option only once, and delaying hover menus slightly so they don’t open or close by accident.

What does a mega menu mean for SEO?

Google can only crawl a link reliably if it is an <a> element with an href attribute. Menu entries built as <span> elements or as onclick handlers without a URL are links Google can’t reliably extract.

Because the menu appears sitewide, the pages it lists receive internal links from almost every URL. With hundreds of entries, the important categories are harder to tell apart from the rest, so a deliberate selection helps (assessment).

Accessibility

The W3C ARIA Authoring Practices Guide shows site navigation dropdowns as disclosure buttons with aria-expanded. It does not use the ARIA menu role for this, because typical site navigation doesn’t need the keyboard behavior that role implies.

Example

HTML
<li>
  <a href="/men/">Men</a>
  <button aria-expanded="false" aria-controls="nav-men">Men submenu</button>
  <ul id="nav-men" hidden>
    <li><a href="/men/shoes/">Shoes</a></li>
    <li><a href="/men/jackets/">Jackets</a></li>
  </ul>
</li>

Sources

  1. Make your links crawlable – Google Search Centraldevelopers.google.com
  2. Mega Menus Work Well for Site Navigation – Nielsen Norman Group (2017)nngroup.com
  3. Example Disclosure Navigation Menu – W3C WAI ARIA Authoring Practices Guidew3.org

Last updated: