Checklist
Mega-Dropdowns
1. What content do we want to show in the mega-dropdown?
2. How many levels of navigation should be accessible directly from the mega-dropdown?
3. Do we want a simple overlay or multilevel navigation with nested submenus?
4. How does the user open a mega-dropdown with mouse/keyboard (on hover/tap/click)?
5. How does the user open a mega-dropdown with touch (on tap/click)?
6. Are important navigation options accessible without the mega-dropdown?
7. Do we need to repeat some options within and outside of a mega-dropdown?
8. Can we display only 6-7 items at a time and include a 'Browse all' button to access the rest?
9. Do we need a 'Browse all' button that would surface all navigation at once?
10. How do we group, organize, and design navigation options in a mega-dropdown?
11. Do we use icons to display differences between sections?
12. Do we feature thumbnails, videos, or frequently asked options?
13. Do we style links to the category's main page and its subnavigation differently?
14. For each category, do we include a link to the category's main page in subnavigation?
15. Can we underline category titles to identify them as links to the category's page?
16. Can we add a 'Home' link or a 'Browse all' button within each subcategory?
17. Do we avoid split bar navigation (category link and icon opening the menu)?
18. Do we need to use accordions to expand some sections or subsections?
19. Are all sections in the mega-dropdown accessible via keyboard? (focus:not-visible)
20. For hover menus, do we avoid hover flickering (e.g., SVG path exit areas)?
21. For hover menus, do we avoid long fade-in/fade-out transitions and entry/exit delays?
22. For hover menus, do we avoid placing important, frequently used items close to the mega-dropdown navigation (e.g., search bar, CTA, shopping cart icon)?
23. Do we highlight a selected section (e.g., underlined/background change)?
24. For click/tap menus, do we have an icon to indicate that a category title triggers a mega-dropdown on click (arrow, chevron, min. 50x50px)?
25. For click/tap menus, do we keep it open until the user manually closes it?
26. On mobile, do we turn the mega-dropdown into a group of vertical accordions?
27. On mobile, do we avoid multiple overlays and turn the mega-dropdown into a group of vertical accordions?
28. Can we avoid horizontal overlays and use vertical accordions and split-menus instead?
29. Could we replace mega-dropdowns with structured guides and 'navigation queries'?
30. How do we extend navigation if necessary (e.g., if more items need to be added)?