Dropdown menu
A button-triggered list of actions that floats over the page, like the menu under an account avatar or File button.
See it
What it is
A dropdown menu is a button plus a floating list of actions that opens next to it. File / New / Open on the 1984 Macintosh menu bar is the original desktop version; the same pattern now sits behind account avatars, filter buttons, and labels with a small chevron. It answers 'what can I do here?', not 'which value is selected?'. That second job belongs to a select.
Reach for one when several closely related commands need a compact home and none deserves a permanent button. Keep the label or icon on the trigger specific enough to predict the list. An overflow menu is the same family with a three-dot trigger; a popover can hold arbitrary content, while a menu is a list of commands.
Gotcha: opening the panel is only half the component. Focus should move into the menu, arrow keys should move between items, Enter should run one, and Escape should close it and return focus to the trigger. The panel also needs to flip or shift when it would cross the viewport. Skip that collision handling and edge buttons produce clipped menus.
Ask AI for it
Build an accessible dropdown menu opened by a labelled button with a down chevron. Render a compact floating panel of action rows below the trigger using Floating UI with offset(), flip(), and shift() middleware so it stays inside the viewport. Give the trigger aria-haspopup='menu' and a live aria-expanded value. Use role='menu' and role='menuitem', move focus with Up and Down arrow keys, select with Enter or Space, close on Escape or outside click, and return focus to the trigger. Support separators, disabled items, a visible focus state, and prefers-reduced-motion.