A hover-activated nested menu for multi-level navigation with submenus, sections, dividers, and custom icons.
import { NestedMenu } from "@/components/ui/nested-menu";
import { Button } from "@/components/ui/button";
import { Settings, Download, ChevronRight } from "lucide-react";
const menuSections = [
{
title: "Actions",
items: [
{
key: "settings",
label: "Settings",
icon: Settings,
onSelect: () => console.log("Settings clicked"),
},
{
key: "download",
label: "Download",
icon: Download,
hasSubmenu: true,
submenuItems: [
{ key: "mac", label: "macOS", onSelect: () => {} },
{ key: "windows", label: "Windows", onSelect: () => {} },
{ key: "linux", label: "Linux", onSelect: () => {} },
],
},
],
},
];
export default function Example() {
return (
<div className="flex min-h-[320px] items-center justify-center">
<NestedMenu
sections={menuSections}
trigger={<Button>Open Menu</Button>}
arrowIcon={ChevronRight}
/>
</div>
);
}