Skip to content
Sign in

Dropdown Menus for React and Tailwind

Dropdown menus keep a screen tidy while holding every action within reach. The details decide whether they feel right: arrow keys, type to jump, sensible positions and clear groups. Open each one with the keyboard before you commit. Install one with a single command, then give it your own actions, icons and shortcuts. Put destructive actions last, and set them apart from the rest.

Context menu
Context menu

About dropdown menus

Dropdown menus list actions that open from a button or a right click: edit, duplicate, share, delete. They can hold groups with labels, icons, keyboard shortcuts, checkable items, submenus and destructive actions set apart at the end, and context menus offer the same list where people right click.

Use a menu for actions and a select for choosing a value. Keep the list short, put the common actions first, and make sure arrow keys, Enter, Escape and typing a letter all work. Submenus need a forgiving hover path so they don't close as the pointer moves into them.

Frequently asked questions

Use an accessible primitive such as Radix or Base UI Menu, which handles focus, keyboard navigation, positioning and closing. Style the trigger, list and items around it.

A select chooses a value for a form field and shows the current choice. A dropdown menu runs actions, like rename or delete, and doesn't keep a selected value.

Listen for the contextmenu event, prevent the browser's menu and open yours at the pointer's position. Provide the same actions through a visible button too, since touch users can't right click.

Delay closing for a moment when the pointer leaves, and keep the submenu open while the pointer moves toward it in a triangle shaped safe area.

Usually not. Opening on click works for touch, keyboard and mouse alike. Hover menus close by accident and hide actions from people who can't hover.

Put it last, separate it with a divider and colour it as a warning. Ask for confirmation when the action can't be undone.

Short enough to scan, ideally fewer than about ten items. Group longer lists with labels, move rare actions into a submenu, or use a command palette instead.

Explore more