Dropdown menu
Also called dropdown, menu button, or overflow menu
A list of actions that drops down from a button when you click it, then closes as soon as you pick one.
import { Menu } from '@base-ui/react/menu';
const popup =
'min-w-48 origin-(--transform-origin) rounded-xl border bg-background p-1 shadow-lg outline-none transition-[opacity,scale] duration-150 ease-out data-ending-style:scale-[0.96] data-ending-style:opacity-0 data-starting-style:scale-[0.96] data-starting-style:opacity-0';
const item =
'flex cursor-default items-center justify-between gap-6 rounded-lg px-3 py-2 text-sm outline-none select-none data-highlighted:bg-muted data-popup-open:bg-muted';
const kbd = 'text-xs text-muted-foreground';
type Props = { onAction: (action: string) => void };
export function ProjectOptionsMenu({ onAction }: Props) {
return (
<Menu.Root>
<Menu.Trigger className='rounded-lg border px-4 py-2 text-sm font-medium hover:bg-muted data-popup-open:bg-muted'>
Options
</Menu.Trigger>
<Menu.Portal>
{/* Scales from the corner nearest the button: --transform-origin. */}
<Menu.Positioner align='start' sideOffset={6}>
<Menu.Popup className={popup}>
<Menu.Item className={item} onClick={() => onAction('Edit')}>
Edit <kbd className={kbd}>⌘E</kbd>
</Menu.Item>
<Menu.Item className={item} onClick={() => onAction('Duplicate')}>
Duplicate <kbd className={kbd}>⌘D</kbd>
</Menu.Item>
{/* Opens on hover or the Right arrow; the Left arrow comes back. */}
<Menu.SubmenuRoot>
<Menu.SubmenuTrigger className={item}>
Share <span aria-hidden='true'>›</span>
</Menu.SubmenuTrigger>
<Menu.Portal>
<Menu.Positioner sideOffset={4}>
<Menu.Popup className={popup}>
{['Copy link', 'Email', 'Slack'].map((label) => (
<Menu.Item
key={label}
className={item}
onClick={() => onAction(label)}
>
{label}
</Menu.Item>
))}
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.SubmenuRoot>
<Menu.Separator className='my-1 h-px bg-border' />
<Menu.Item
className={`${item} text-red-600 data-highlighted:bg-red-500/10`}
onClick={() => onAction('Delete')}
>
Delete
</Menu.Item>
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu.Root>
);
}Add an Options dropdown menu to the project header with Edit (⌘E), Duplicate (⌘D), a Share submenu (Copy link, Email, Slack), a separator, and a red Delete item. Open it below the button, scaling from 0.96 at the top-left corner over 150ms. Support Up and Down arrows, Enter, Right arrow for the submenu, and Escape, and return focus to the button when it closes.
Paste into Layerwise or any AI coding tool.
What is Dropdown menu?
A dropdown menu tucks a set of related actions behind one button, such as Options, a ⋯ icon, or a profile picture. Clicking it opens a short list below the button, and choosing an item runs the action and closes the menu. Separators group related items, and an item with an arrow opens a submenu to the side.
Use it to tidy away secondary actions like Duplicate, Share, or Delete. When people are choosing a value for a form field, a select or a combobox is the better fit, and when the panel needs inputs or switches, use a popover.
A good menu works from the keyboard: arrow keys move the highlight, Enter picks, the right arrow opens a submenu, and Escape closes the menu and returns focus to its button. Keep the opening animation short, around 150ms, scaling slightly from the corner nearest the button, and put destructive items like Delete last, in red.
Often confused with
- Context menu
- A context menu opens where you right-click or long-press an item. A dropdown menu opens from a visible button.
- Combobox
- A combobox fills in a value for a field and lets you type to filter the options. A dropdown menu runs an action.
Related terms
All termsContext menu
A menu of actions for one item that opens at the pointer when you right-click it, or long-press it on a touch screen.
Popover
A small floating panel anchored to the button that opened it, often with an arrow, holding a few controls and closing when you click outside.
Command palette
A search box that opens with a shortcut like ⌘K and lets you find and run any command or page by typing a few letters.
Keyboard shortcut
A key combination that runs an action directly, like ⌘S to save or ⌘K to open search, so frequent users can skip the mouse.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.