An animated expanding menu that reveals action items from a trigger button, with configurable direction, layout, and alignment.
"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>
);
}