# Unlimited Nested Menu
A dropdown where each branch morphs into a stacked sub-panel, no depth limit, fully keyboard driven.
- Demo: https://lab.moumen.dev/components/unlimited-nested-menu
- Install: `npx moumenlab add unlimited-nested-menu` — or `npx shadcn@latest add https://lab.moumen.dev/r/unlimited-nested-menu.json`
- Dependencies: motion
- Registry dependencies: https://lab.moumen.dev/r/lab-theme.json
- Installs to: `components/lab/unlimited-nested-menu.tsx`
## Usage
```tsx
"use client";
import type { ReactNode } from "react";
import NestedMenu, { type NestedMenuItem } from "./unlimited-nested-menu";
export default function NestedMenuExample() {
return (
{/* Default: drill any branch and its children stack over the menu. */}
console.log("picked", item.label, "from", path.join(" › "))}
/>
{/* align="end" pins the popup's right edge to the trigger (menus near the
screen's right side); dim={false} keeps parent panels at full strength. */}
{/* animate={false}: instant open/drill/close, for dense tooling UIs. It can
also be controlled — pass `open` + `onOpenChange`. */}
);
}
// A realistic "act on this file" menu: a deep folder tree (proves the depth is
// unbounded) plus sibling actions. A folder WITH children is a branch (opens a
// sub-panel); without, a leaf (a pickable target).
export const MENU_ITEMS: NestedMenuItem[] = [
{
id: "move", label: "Move to", icon: , items: [
{
id: "workspace", label: "Workspace", icon: , items: [
{
id: "design", label: "Design", icon: , items: [
{
id: "brand", label: "Brand", icon: , items: [
{
id: "y2026", label: "2026", icon: , items: [
{
id: "q1", label: "Q1 campaign", icon: , items: [
{ id: "launch", label: "Launch assets", icon: },
{ id: "social", label: "Social", icon: },
{ id: "press", label: "Press kit", icon: },
],
},
{ id: "q2", label: "Q2 campaign", icon: },
],
},
{ id: "logos", label: "Logos", icon: },
],
},
{ id: "productui", label: "Product UI", icon: },
],
},
{
id: "eng", label: "Engineering", icon: , items: [
{ id: "frontend", label: "Frontend", icon: },
{ id: "backend", label: "Backend", icon: },
],
},
{ id: "personal", label: "Personal", icon: },
],
},
],
},
{
id: "status", label: "Set status", icon: , items: [
{ id: "todo", label: "Todo" },
{ id: "doing", label: "In progress" },
{ id: "review", label: "In review" },
{ id: "done", label: "Done" },
],
},
{
id: "assign", label: "Assign to", icon: , items: [
{ id: "sarah", label: "Sarah Chen" },
{ id: "marcus", label: "Marcus Lee" },
{ id: "priya", label: "Priya Patel" },
{ id: "you", label: "You" },
],
},
{ id: "copy", label: "Copy link", icon: , hint: "⌘L" },
{ id: "dupe", label: "Duplicate", icon: , hint: "⌘D" },
{ id: "delete", label: "Delete", icon: , danger: true, hint: "⌫" },
];
function Svg({ children }: { children: ReactNode }) {
return (
);
}
function FolderIcon() { return ; }
function FlagIcon() { return ; }
function UserIcon() { return ; }
function LinkIcon() { return ; }
function CopyIcon() { return ; }
function TrashIcon() { return ; }
function GridIcon() { return ; }
function PenIcon() { return ; }
function SparkleIcon() { return ; }
function CalendarIcon() { return ; }
function MegaphoneIcon() { return ; }
function TargetIcon() { return ; }
function RocketIcon() { return ; }
function ShareNodesIcon() { return ; }
function FileTextIcon() { return ; }
function ImageIcon() { return ; }
function LayoutIcon() { return ; }
function CodeIcon() { return ; }
function MonitorIcon() { return ; }
function DatabaseIcon() { return ; }
```
## Source — `components/lab/unlimited-nested-menu.tsx`
```tsx
"use client";
import {
useCallback,
useEffect,
useId,
useLayoutEffect,
useRef,
useState,
type CSSProperties,
type KeyboardEvent,
type ReactNode,
} from "react";
import {
AnimatePresence,
MotionConfig,
animate,
motion,
useIsPresent,
useReducedMotion,
} from "motion/react";
// Unlimited nested menu - iOS-style stacked drill-down.
//
// The main dropdown never changes. Click a branch item and its children open as
// a NEW panel anchored right under that item, laid OVER the menu below it - the
// clicked item's name becomes the new panel's title (its header sits exactly
// where the item was, so the row appears to turn into the title). Do it again
// and the grandchildren stack the same way. There is no depth limit; parents
// stay visible and dimmed behind, and clicking one pops back to it.
//
// Motion (motion/react):
// - Opening the MENU: the root panel reveals from the trigger, scale + fade.
// - Drilling a branch: a shared-element morph - the child panel mounts clipped
// to just its header, which sits EXACTLY where the clicked row is and keeps
// the row's own icon, then opens - the clip expands downward while the
// title's weight crossfades plain -> bold (a measured, imperative animate()
// sequence, since the morph targets depend on the clicked row's geometry).
// - Any close (pop a level, or close the whole menu): AnimatePresence fades
// the leaving panel (or the whole stack) in place - shorter than the enter,
// no drift - with none of the exit-snapshot bookkeeping.
//
// Positioning is JS-measured against the popup origin, with a viewport-edge
// correction (--nm-shift-x) so a full-width panel near the screen edge slides to
// stay on-screen. Requires the lab-theme tokens. Fully Tailwind, no CSS files.
const EASE = [0.22, 1, 0.36, 1] as const;
const POP_S = 0.22; // per-panel enter
const EXIT_S = 0.15; // exits are quicker + quieter than the enter
// Panel shadows: the front panel owns the stack's elevation; panels behind it
// collapse to a crisp hairline so shadows don't compound with depth.
const SHADOW_ELEV =
"shadow-[0_0_0_1px_rgba(0,0,0,0.07),0_14px_34px_-10px_rgba(0,0,0,0.26),0_5px_14px_-6px_rgba(0,0,0,0.12)]";
const SHADOW_BEHIND = "shadow-[0_0_0_1px_rgba(0,0,0,0.05),0_1px_2px_-1px_rgba(0,0,0,0.08)]";
export interface NestedMenuItem {
id?: string;
label: string;
icon?: ReactNode;
hint?: string;
danger?: boolean;
disabled?: boolean;
items?: NestedMenuItem[];
}
export interface NestedMenuState {
open: boolean;
depth: number;
title: string;
path: string[];
count: number;
lastPick: string | null;
}
interface Frame {
node: NestedMenuItem | null;
fromIndex: number | null;
anchor: { top: number; left: number };
morph?: { labelX: number; labelCY: number } | null;
}
export default function NestedMenu({
items,
rootTitle = "Actions",
triggerLabel = "Open menu",
dim = true,
animate: animateProp = true,
align = "start",
open: controlledOpen,
defaultOpen = false,
onOpenChange,
onSelect,
onStateChange,
inspect = false,
className = "",
}: {
items: NestedMenuItem[];
rootTitle?: string;
triggerLabel?: string;
dim?: boolean;
animate?: boolean;
align?: "start" | "end";
open?: boolean;
defaultOpen?: boolean;
onOpenChange?: (open: boolean) => void;
onSelect?: (item: NestedMenuItem, path: string[]) => void;
onStateChange?: (state: NestedMenuState) => void;
inspect?: boolean;
className?: string;
}) {
const [openU, setOpenU] = useState(defaultOpen);
const open = controlledOpen ?? openU;
const setOpen = useCallback(
(value: boolean) => {
if (controlledOpen === undefined) setOpenU(value);
onOpenChange?.(value);
},
[controlledOpen, onOpenChange],
);
const [frames, setFrames] = useState([{ node: null, fromIndex: null, anchor: { top: 0, left: 0 } }]);
const [activeIndex, setActiveIndex] = useState(0);
const [lastPick, setLastPick] = useState(null);
const top = frames[frames.length - 1];
const topItems = top.node ? top.node.items ?? [] : items;
const depth = frames.length - 1;
const path = frames.slice(1).map((f) => f.node!.label);
const rootRef = useRef(null);
const triggerRef = useRef(null);
const stackRef = useRef(null);
const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
const pendingFocus = useRef(null);
const inspectDrilled = useRef(false);
itemRefs.current = [];
const popupId = useId();
const resetToRoot = useCallback(() => {
setFrames([{ node: null, fromIndex: null, anchor: { top: 0, left: 0 } }]);
setActiveIndex(0);
}, []);
const openMenu = useCallback(() => {
resetToRoot();
pendingFocus.current = 0;
setOpen(true);
}, [resetToRoot, setOpen]);
// Close is logical-immediate (open -> false, focus returns now); Animate-
// Presence keeps the popup mounted a beat so the whole stack fades out.
const closeMenu = useCallback(
(returnFocus: boolean) => {
setOpen(false);
if (returnFocus) requestAnimationFrame(() => triggerRef.current?.focus());
},
[setOpen],
);
// Open a branch: measure the clicked item so the child lands right under it,
// and where its label sits so the child's title can morph out of the row.
const drill = useCallback((item: NestedMenuItem, index: number, el?: HTMLElement | null) => {
if (!item.items?.length) return;
const origin = stackRef.current;
const node = el ?? itemRefs.current[index];
let anchor = { top: 0, left: 0 };
let morph: { labelX: number; labelCY: number } | null = null;
if (origin && node) {
const o = origin.getBoundingClientRect();
const r = node.getBoundingClientRect();
// Left: the PARENT panel's left so the stack is a clean vertical staircase.
const panelEl = node.closest("[data-nm-panel]");
const left = panelEl ? panelEl.getBoundingClientRect().left - o.left : 0;
anchor = { top: r.top - o.top, left };
const labelEl = (node.querySelector("[data-nm-label]") ?? node) as HTMLElement;
const lr = labelEl.getBoundingClientRect();
morph = {
labelX: lr.left - (o.left + anchor.left),
labelCY: lr.top + lr.height / 2 - (o.top + anchor.top),
};
}
setFrames((f) => [...f, { node: item, fromIndex: index, anchor, morph }]);
setActiveIndex(0);
pendingFocus.current = 0;
}, []);
// Pop back to a given depth (default: one level). AnimatePresence fades the
// removed panel out on its own — no exit snapshot to manage.
const popTo = useCallback(
(target = depth - 1) => {
if (target < 0 || target >= depth) return;
const removed = frames[frames.length - 1];
setFrames((f) => f.slice(0, target + 1));
const restore = target === depth - 1 ? removed.fromIndex ?? 0 : 0;
setActiveIndex(restore);
pendingFocus.current = restore;
},
[depth, frames],
);
const select = useCallback(
(item: NestedMenuItem) => {
if (item.disabled) return;
setLastPick(item.label);
onSelect?.(item, path);
closeMenu(true);
},
[closeMenu, onSelect, path],
);
const focusIndex = useCallback((index: number) => {
setActiveIndex(index);
itemRefs.current[index]?.focus();
}, []);
const nextEnabled = useCallback(
(from: number, delta: number) => {
const n = topItems.length;
for (let step = 1; step <= n; step += 1) {
const i = (from + delta * step + n * step) % n;
if (!topItems[i]?.disabled) return i;
}
return from;
},
[topItems],
);
useLayoutEffect(() => {
if (!open) return;
if (pendingFocus.current != null) {
const i = pendingFocus.current;
pendingFocus.current = null;
requestAnimationFrame(() => itemRefs.current[i]?.focus());
}
}, [open, frames.length]);
useEffect(() => {
if (!inspect) {
inspectDrilled.current = false;
return;
}
openMenu();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [inspect]);
useEffect(() => {
if (!inspect || !open || depth > 0 || inspectDrilled.current) return;
inspectDrilled.current = true;
const id = window.setTimeout(() => {
const first = topItems[0];
if (first?.items?.length) drill(first, 0, itemRefs.current[0]);
}, 60);
return () => clearTimeout(id);
}, [inspect, open, depth, topItems, drill]);
useEffect(() => {
if (!open) return undefined;
const onDown = (e: PointerEvent) => {
if (!rootRef.current?.contains(e.target as Node)) closeMenu(false);
};
document.addEventListener("pointerdown", onDown);
return () => document.removeEventListener("pointerdown", onDown);
}, [open, closeMenu]);
// Keep the whole stack inside the viewport horizontally: shift the ORIGIN (not
// each panel) so the staircase slides together and the drill math stays intact.
useLayoutEffect(() => {
if (!open) return undefined;
const el = stackRef.current;
if (!el) return undefined;
const GUTTER = 8;
let raf = 0;
const place = () => {
raf = 0;
el.style.setProperty("--nm-shift-x", "0px");
const rect = el.getBoundingClientRect();
const vw = document.documentElement.clientWidth;
let shift = 0;
const overRight = rect.right - (vw - GUTTER);
if (overRight > 0) shift = -overRight;
if (rect.left + shift < GUTTER) shift = GUTTER - rect.left;
el.style.setProperty("--nm-shift-x", `${Math.round(shift)}px`);
};
const schedule = () => {
if (!raf) raf = requestAnimationFrame(place);
};
place();
window.addEventListener("resize", schedule);
window.addEventListener("scroll", schedule, true);
return () => {
if (raf) cancelAnimationFrame(raf);
window.removeEventListener("resize", schedule);
window.removeEventListener("scroll", schedule, true);
};
}, [open]);
useEffect(() => {
onStateChange?.({
open,
depth,
title: top.node ? top.node.label : rootTitle,
path,
count: topItems.length,
lastPick,
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [open, depth, topItems, lastPick]);
function onKeyDown(e: KeyboardEvent) {
const item = topItems[activeIndex];
switch (e.key) {
case "ArrowDown":
e.preventDefault();
focusIndex(nextEnabled(activeIndex, 1));
break;
case "ArrowUp":
e.preventDefault();
focusIndex(nextEnabled(activeIndex, -1));
break;
case "Home":
e.preventDefault();
focusIndex(nextEnabled(-1, 1));
break;
case "End":
e.preventDefault();
focusIndex(nextEnabled(0, -1));
break;
case "ArrowRight":
if (item?.items?.length) {
e.preventDefault();
drill(item, activeIndex, itemRefs.current[activeIndex]);
}
break;
case "Enter":
case " ":
e.preventDefault();
if (item?.items?.length) drill(item, activeIndex, itemRefs.current[activeIndex]);
else if (item) select(item);
break;
case "ArrowLeft":
case "Backspace":
if (depth > 0) {
e.preventDefault();
popTo(depth - 1);
}
break;
case "Escape":
e.preventDefault();
if (depth > 0) popTo(depth - 1);
else closeMenu(true);
break;
case "Tab":
closeMenu(false);
break;
default:
break;
}
}
return (