Dropdown Menu

Dropdown menu. Free, MIT · Navigation and layout › Menus and commands

Installation

npx valyro-cli@latest add dropdown-menu

npx shadcn@latest add https://valyro.xyz/r/dropdown-menu.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { DropdownMenu } from 'valyro-ui';

Props

Prop	Type	Default
`trigger`	`ReactElement`		A single focusable element, usually a Button. Receives the menu-button ARIA and handlers. Or `DropdownMenu.Trigger`.
`items`	`MenuItem[]`		Menu rows: actions (with optional submenus), checkboxes, radio groups, separators and labels. Or compose them as children: `DropdownMenu.Item`, `.CheckboxItem`, `.Label`, `.Separator`.
`children`	`ReactNode`		The compound form: a `DropdownMenu.Trigger` and the rows, instead of `trigger` and `items`.
`open`	`boolean`		Controlled `open`; use with `onOpenChange`.
`defaultOpen`	`boolean`	`false`	Initial `open` when uncontrolled.
`onOpenChange`	`(open: boolean) => void`		Called with the new `open` when it changes.
`placement`	`Placement`	`'bottom-start'`	Preferred side and alignment relative to the trigger; flips when there is no room.
`animation`	`'pop' \| 'spring'`		`pop` (default): the theme's enter. `spring`: the menu and its submenus spring open and one highlight glides between rows.
`className`	`string`		Class for the menu surface.

Compound parts

DropdownMenu.Trigger (DropdownMenuTrigger), DropdownMenu.Item (DropdownMenuItem), DropdownMenu.CheckboxItem (DropdownMenuCheckboxItem), DropdownMenu.Label (DropdownMenuLabel), DropdownMenu.Separator (DropdownMenuSeparator)

Related components

Context Menu — Right-click menu
Command Palette — ⌘K-style command menu
Keyboard Map Overlay — Keyboard shortcut map for a screen: search, keyboard view and practice mode
App Shell — Application frame
Navbar — Top navigation bar
Sidebar — Side navigation panel
Resizable Panels — Panels with draggable dividers
Breadcrumbs — Breadcrumb trail
Tabs — Tabs
Segmented Control — Mode switcher
Pagination — Page navigation
Stepper — Step-by-step progress

Previous: Stepper · Next: Context Menu · All Navigation and layout