Nested Menu Drill
A submenu pushes the parent list aside inside the same panel, and the panel resizes to fit it.
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 { useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Nested Menu Drill
*
* A submenu opens inside the menu it came from: the parent list slides
* out to the left, the child arrives from the right, and the panelAbout this pattern
The alternative to flying a second menu out of the side of the first, which on a narrow screen has nowhere to go. Here the drill happens in place: the parent list leaves to the left, the child arrives from the right, the heading becomes a back row, and the panel resizes to whatever the new level actually needs so a three-item submenu is not padded out to the height of a five-item parent. Height is the one genuine size change, so it is a short eased tween — a spring there would overshoot the menu past its own resting size and bounce every row inside it. The levels themselves only translate, never scale, because menu rows are text end to end.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Mobile navigation
Each level pushes the previous one aside and offers a back row to return.
Related patterns
- Breadcrumb Trail AppendGoing one level deeper slides a new crumb in from the right while the trail behind it recedes.
- Sidebar CollapseA navigation rail narrows to icons, with labels leaving before the width closes so text is never squeezed.
- Split View ResizeDragging the divider resizes both panes live, and releasing it settles the split on the nearest stop.