Overlays & feedback
Full-screen overlay
A full-screen overlay is a layer that covers the entire viewport above the page, used for mobile menus, video lightboxes and focused tasks.
- Also called
- Takeover, Full-screen menu, Lightbox, Full-screen modal
- Browse examples
- Mobile designs →
What is a full-screen overlay?
A full-screen overlay replaces the page with one focused view until it is closed. On SaaS marketing sites it has two main uses. The first is the mobile menu: tap the hamburger and the whole screen fills with large navigation links, grouped sections and a sign-up button, with the close icon where the hamburger was. The second is the video lightbox: click "Watch the demo" and a dark layer covers the page while the product video plays in the middle.
Other uses include search overlays on docs and blogs, image lightboxes in galleries and changelogs, and the occasional full-screen signup flow. In each case the overlay is welcome because the visitor opened it. Full-screen promotional takeovers that appear on arrival are another matter; they hide the page entirely and are among the fastest ways to lose a first-time visitor.
Because it covers everything, the exit has to be obvious: a large close button in a consistent corner, Escape on desktop, and for lightboxes a click on the dark backdrop. Lock the page scroll behind it, trap focus inside, return focus to the trigger on close, and keep the open animation short. A video lightbox should stop playback when closed, not keep playing sound behind the page.
When to use a full-screen overlay, and when not to
Use it for
- Mobile navigationA menu with grouped sections that needs the whole screen for large tap targets.
- Video and image viewingMedia that deserves the full viewport and a dark background to watch properly.
- Single focused taskSearch or a short flow where the rest of the page would only distract.
Avoid it for
- Unrequested promotionsA takeover on page load hides the content visitors came for and invites an instant exit.
- Small amounts of contentA short message or form fits in a dialog that keeps the page visible behind it.
- Desktop navigationOn wide screens a nav bar with dropdowns beats hiding every link behind a full-screen menu.
Anatomy of a full-screen overlay
- 1BackdropA solid or near-opaque layer covering the full viewport, dark for media and often brand-colored or white for menus.
- 2Header rowThe logo and a close button, placed exactly where the header and menu icon were.
- 3ContentNavigation links, a video player, search input or images, centered or stacked.
- 4Primary actionFor menus, a sign-up or demo button pinned near the bottom of the screen.
Common full-screen overlay variants
1. Full-screen mobile menu
Large stacked links with collapsible groups and CTA buttons at the bottom.
2. Video lightbox
A dark backdrop with a centered player, closed by the backdrop, Escape or a close icon.
3. Search overlay
A large search field at the top with live results below, common on docs sites.
Often confused with
Full-screen overlay vs. dialog
A dialog is a smaller window with the dimmed page visible around it. A full-screen overlay covers the whole viewport.
Full-screen overlay vs. drawer
A drawer covers one side of the screen and leaves part of the page visible. A full-screen overlay hides the page completely.
Full-screen overlay vs. hamburger menu
The hamburger is the icon that opens the menu. The full-screen overlay is one way the opened menu can be shown.
Frequently asked
Is a full-screen mobile menu better than a drawer?
It gives more room for grouped links and big tap targets, which helps when the navigation is deep. A drawer keeps a sliver of the page visible, which suits shorter menus. Both should keep the main CTA visible.
How should a video lightbox behave?
Open with the video ready to play, close on Escape, a backdrop click or a visible close button, stop playback on close, and return focus to the play button that opened it.