{"id":178,"slug":"nng-megamenu-dont-cover-entire-screen","title":"NN/g: \"On large screens, don't cover the entire screen when megamenus are open\" (Apr 30 2023)","kind":"reference","scope":"business","status":"current","audiences":["claude-code","candid-team"],"topics":["navigation-design"],"reference_body":"**Quote (NN/g, Apr 30, 2023):**\n\n> \"On large screens, don't cover the entire screen when megamenus (or submenus) are open.\"\n\n**Source:** <https://www.nngroup.com/articles/menu-design/>\n\n**Confidence:** Verified.\n\n**Implication:** Desktop full-screen mega menus cause disorientation — users lose their place in the page beneath. Cap the mega menu at a sensible width (typically the content max-width of the site) and leave the page below visible. **Mobile is different**: full-screen sequential menus or accordions are the safer pattern there. See [[mobile-nav-sequential-not-split-button]] for the mobile distinction.","rationale_body":null,"metadata":null,"links":{"outgoing":[{"slug":"nielsen-mega-menus-show-everything-at-glance","title":"Jakob Nielsen: \"Mega menus show everything at a glance, so users can see rather than try to remember\"","kind":"reference","scope":"business","link_type":"relates-to"}],"incoming":[{"slug":"mobile-nav-sequential-not-split-button","title":"NN/g: split buttons unreliable on touch (fat-finger conflicts) — use sequential menus or accordions on mobile","kind":"reference","scope":"business","link_type":"relates-to"},{"slug":"rule-implement-megamenu-with-hover-delay","title":"RULE: Mega menu hover delay 500ms before show, 100ms reveal. Mobile uses accordion / sequential, not the same mega menu.","kind":"rule","scope":"business","link_type":"depends-on"},{"slug":"research-brief-ia-multi-vertical-service-business","title":"Research brief: Information architecture for service businesses with multiple verticals (piece 6 of 15)","kind":"reference","scope":"business","link_type":"relates-to"}]},"created_at":"2026-05-22T19:40:49.014Z","updated_at":"2026-05-22T19:40:49.014Z"}