Components

Dropdown Menu

Anchored action menu: it drifts open with a slight scale while items cascade in at 12ms intervals, flipping above the trigger when the viewport runs out.

Install

Copies the component source — plus its small internal deps — into your project. You own the code from the first minute.

terminal

npx lumora-ui@latest add dropdown-menu

Import

Using the workspace package instead? Deep imports keep cold starts lean; the barrel is fully tree-shakable either way.

app/page.tsx

import { DropdownMenu } from "@lumora/ui/components/dropdown-menu";
// or from the barrel:
import { DropdownMenu } from "@lumora/ui";

Props worth knowing

trigger fills the built-in button; items mixes plain actions ({ label, icon?, onSelect, destructive?, disabled? }) with { kind: "checkbox" | "separator" | "label" } entries — checkbox items toggle via onCheckedChange and keep the menu open. align: "start" | "end" sets the anchored edge; the menu flips above when space runs out, with arrows, Home/End, typeahead and Enter on the keyboard. Props extend the natural HTML element, so className, event handlers, and aria attributes pass straight through.