Expand Menu

Component 28

About

An animated expanding menu that reveals action items from a trigger button, with configurable direction, layout, and alignment.

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

Code

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

Usage.tsx

"use client";

import { ExpandMenu } from "@/components/ui/expand-menu";
import {
  PencilEdit01Icon as Pencil,
  Copy01Icon as Copy,
  Share01Icon as Share,
  Archive01Icon as Archive,
} from "hugeicons-react";

const DEMO_ITEMS = [
  { icon: <Pencil size={16} />, label: "Edit", onClick: () => {} },
  { icon: <Copy size={16} />, label: "Copy", onClick: () => {} },
  { icon: <Share size={16} />, label: "Share", onClick: () => {} },
  { icon: <Archive size={16} />, label: "Archive", onClick: () => {} },
];

export default function ExpandMenuDemo() {
  return (
    <div className="flex items-center justify-center w-full min-h-[220px] p-12">
      <ExpandMenu items={DEMO_ITEMS} direction="right" />
    </div>
  );
}