Components
Dropdown Menu
A dropdown menu composed of Popover and Menu — group items, nest submenus, and navigate with the keyboard
Installation
- $npx litefy@latest add dropdown-menu
- $pnpm dlx litefy@latest add dropdown-menu
- $yarn dlx litefy@latest add dropdown-menu
- $bun --bun litefy@latest add dropdown-menu
Usage
Composed from Popover + Menu — the CLI install resolves them automatically.
- Account
- System
Selected: -
"use client";
import { useState, type ReactNode } from "react";
import { DropdownMenu, type MenuConfig } from "@/ui";
const items: MenuConfig[] = [
{
group: "Account",
items: [
{ label: "Profile" },
{ label: "Preferences", children: [{ label: "Theme" }, { label: "Language" }] },
],
},
{
group: "System",
items: [{ label: "Notifications" }, { label: "Settings" }, { label: "Logout" }],
},
];
export default function Demo() {
const [selected, setSelected] = useState<ReactNode | null>(null);
return (
<div className="flex flex-col items-center gap-3">
<DropdownMenu trigger="Open Menu" items={items} onSelect={(item) => setSelected(item.label)} />
<p className="text-sm text-muted-foreground">Selected: {selected ?? "-"}</p>
</div>
);
}
Selecting an item or Escape closes the panel and focus returns to the trigger; autoFocus={open} focuses the first enabled item on each open.
API Reference
DropdownMenu
| Prop | Type | Default | Description |
|---|---|---|---|
trigger | React.ReactNode | - | Trigger label or node |
items | MenuConfig[] | - | Menu items (groups, submenus, leaf items) |
onSelect | (item: MenuItemConfig) => void | - | Fired when a leaf item is clicked |
alignX | "start" | "end" | "center" | "center" | Panel alignment relative to trigger |
className | ClassNameValue | - | Custom classes on the trigger button |
classNames | { content? / item? / label? / sub? } | - | Custom classes for panel, items, labels, submenus |