Full-screen menus: stylish overlay or a step too far?

Key takeaways

A full-screen menu covers the whole page when opened. On phones it is a reasonable way to show a mobile menu. On desktop it usually hides navigation that would fit on screen, adds a click to every journey and removes the page from view. Use a visible menu on desktop, and if you use an overlay, make it fast, labelled and easy to close.

• On phones, a full-screen menu is a common, workable pattern.
• On desktop, it hides a menu that would fit on screen.
• Every journey gains a click, and the page disappears.
• Trap focus inside while open, and close with Escape.

Why do designers choose full-screen menus?

Full-screen menus look clean and dramatic, leave the header minimal and allow large type and imagery in the menu itself. They suit portfolio and brand sites where browsing is the point. For a business site where visitors need services, prices and contact quickly, the look rarely justifies the cost.

• How clear website navigation improves user experience
• Hamburger menus on desktop: why they hide your services

What are the usability costs?

Hidden menus are used less. Nielsen Norman Group's research on hidden navigation found that people use visible menus more often and find content faster with them. A full-screen overlay adds to that by hiding the page, so visitors cannot compare the menu with what they were reading.

• An extra click to see any option.
• The page vanishes while the menu is open.
• Animations can make opening feel slow.
• Visitors may not realise there is a menu at all.

• Recognition vs recall: let visitors see, not remember

How do you make an overlay menu accessible?

When an overlay opens, keyboard focus should move into it and stay inside until it closes, and Escape should close it. The close button must be visible and labelled. Screen readers need to know the menu has opened. Respect reduced motion settings for any animation.

• Keyboard accessibility: can your site work without a mouse?
• Parallax and scroll effects: when motion hurts a website

What are better options on desktop?

Show the main items across the top, with dropdowns or a mega menu for larger sites. You can keep the full-screen style for mobile, where the menu must be hidden anyway. That way the brand look survives on phones and desktop visitors see the options straight away.

• Responsive navigation: when the full menu should collapse

What does this look like in practice?

A pattern we see: a design-led site uses a full-screen overlay on every screen size, opened by a small icon at the top right. On desktop, visitors scroll the homepage looking for services instead. Showing five items across the top on desktop, and keeping the overlay for phones, puts the services in view.

• See client work
• Website Design & Development for UK businesses

Overlay menu checklist

• Use visible navigation on desktop.
• Label the open button 'Menu'.
• Move and trap focus while open.
• Close with Escape and a labelled button.
• Keep animations short and respect reduced motion.

• Announcement bars: useful notice or navigation clutter?
• Swipe gestures on websites: hidden navigation visitors miss

Next step

If your desktop menu is behind an icon, count how many items would fit across the header instead.