Unlimited Nested Menu

Navigation 12

About

A dropdown menu where each item with children drills into a new stacked sub-panel with no depth limit, fully keyboard navigable and animated.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Unlimited Nested Menu to your project and fits it to your theme.

Code

How Unlimited Nested Menu is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}