Lucent UI
← TimelineMenuToast →
✦ LLM-ready

Menu

molecule

Compound-component dropdown menu with portal rendering, 8-direction placement with auto-flip, full WAI-ARIA keyboard navigation, and scale + fade animations. Supports selected, danger, disabled items, shortcut hints, and grouped sections.

"Add a Menu from lucent-ui triggered by a Button. Include items for Edit, Duplicate, and a danger Delete item separated by a MenuSeparator."

Usage

React / JSX
import { Menu, MenuItem, MenuSeparator, MenuGroup } from 'lucent-ui'

<Menu size="md" placement="bottom-start">Menu</Menu>

Installation

pnpm add lucent-ui

API Reference

Menu props — * required

PropTypeDefaultDescription
trigger*React.ReactNode—The element that opens the menu on click.
size"sm" | "md" | "lg""md"Size variant — flows through context to all items. Font sizes aligned with Button.
placement"top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "right""bottom-start"Preferred placement of the popover. Automatically flips at viewport edges.
openboolean—Controlled open state.
onOpenChange(open: boolean) => void—Callback when open state changes.
children*React.ReactNode—MenuItem, MenuSeparator, and MenuGroup children.