A dropdown menu where each item with children drills into a new stacked sub-panel with no depth limit, fully keyboard navigable and animated.
import NestedMenu from "@/components/ui/unlimited-nested-menu";
export default function NestedMenuDemo() {
return (
<div className="flex min-h-[28rem] w-full items-center justify-center bg-background p-10">
<NestedMenu
rootTitle="Actions"
triggerLabel="Open menu"
items={[
{ id: "rename", label: "Rename" },
{ id: "duplicate", label: "Duplicate" },
{
id: "share",
label: "Share",
items: [
{ id: "share-link", label: "Copy link" },
{ id: "share-email", label: "Share via email" },
{
id: "share-team",
label: "Team",
items: [
{ id: "team-eng", label: "Engineering" },
{ id: "team-design", label: "Design" },
{ id: "team-sales", label: "Sales" },
],
},
],
},
{
id: "move",
label: "Move to",
items: [
{ id: "move-drafts", label: "Drafts" },
{ id: "move-archive", label: "Archive" },
],
},
{ id: "delete", label: "Delete", danger: true },
]}
/>
</div>
);
}
Part of UI TripleD — browse the full library on 21st.dev.