Mobile Menu Fullscreen
A hamburger becomes a close glyph as a full-screen menu wipes in with staggered links.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useId, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Mobile Menu Fullscreen
*
* The hamburger becomes a close glyph while a full-height menu comes down
* over the page and the links arrive behind it. The header stays aboveAbout this pattern
Small-screen navigation, where a menu taking the whole frame is the honest amount of space to ask for. The structural decision is the header: it stays above the panel throughout, so the control you pressed to open is exactly where the control to close is, and the glyph morphs in place instead of being replaced by a different icon somewhere else. The panel comes down as one opaque surface on a near-critically-damped spring, the links follow a beat behind it with a parent-level stagger, and leaving is quicker than arriving — a menu that exits as slowly as it entered feels reluctant. The links translate and fade; nothing scales, because scaling 18px type on arrival is the difference between a menu and a toy.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Mobile navigation
The menu control becomes a close glyph while a full-height panel covers the page.
Related patterns
- Bottom Sheet PresentA sheet rises from the bottom edge over a dimming backdrop and settles once.
- Tab Bar Icon SelectThe chosen icon fills and lifts while its label brightens, and the icon you left releases.
- Command Palette OpenThe palette drops a short distance into place with its results already filtering as it lands.