Dropdowns

What is a dropdown?

A dropdown is a button that opens a small panel of actions or links. Common examples are account menus, "more actions" menus on table rows, sort and filter menus, and split buttons with a primary action and a menu of alternatives. Dropdown menus keep interfaces tidy by hiding secondary actions until the user needs them. They differ from selects: a dropdown triggers actions or navigation, while a select stores a form value.

When to use a dropdown

• For secondary actions that do not need to be visible all the time.
• For user and account menus in navbars.
• For row actions in tables and cards, often behind a three-dot icon button.
• Avoid hiding primary actions or very frequent tasks inside a dropdown.

Best practices

• The trigger should be a <button> with aria-expanded and aria-controls that update when the menu opens.
• An icon-only trigger needs an aria-label such as "More actions".
• Close the menu with Escape and return focus to the trigger; close it when clicking outside.
• Support arrow keys to move between items in action menus, and keep a visible focus style.
• Use links for navigation items and buttons for actions inside the menu.
• Group related items with dividers or headings, and put destructive actions last, styled clearly.
• Position the menu so it stays inside the viewport and does not get clipped by parent overflow.
• Make items at least 40 to 44 pixels tall on touch devices.

Framework versions

The dropdown menu examples on this page include simple menus, menus with icons and headers, split buttons, user menus and action lists. Bootstrap 6 versions use the framework's ES module JavaScript and theme-* colour roles. Bootstrap 5 versions use the standard .dropdown component with data-bs-toggle="dropdown", Tailwind CSS versions pair utilities with a small script, and pure CSS versions use techniques such as <details> and <summary>. Preview each one live, copy the code and adapt the items to your app.