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

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

Notes

DropdownMenu is composed internally from Popover and Menu — installing via CLI resolves them automatically.
The trigger is styled with Button's primary variant by default; pass a custom trigger node to override.
Menu receives autoFocus={open} so the first enabled item is focused on each open — arrow keys work immediately.
Selecting an item or pressing Escape closes the panel; focus returns to the trigger automatically (Popover's built-in behaviour).
Submenu hover, ArrowRight / ArrowLeft navigation, and outside-mousedown dismissal are handled by Menu internally.

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