Dropdown menus: hover, click, touch and keyboard

Key takeaways

Dropdown menus work when they open predictably, stay open while visitors move into them and work the same for mouse, touch and keyboard users. Opening on click is the most reliable choice; hover can work on desktop with short delays. On touch screens the parent must open the dropdown, not navigate away, and keyboard users must be able to open and close it.

• Click to open is the most reliable across devices.
• Hover menus need a short delay before opening and closing.
• On touch screens, tapping the parent should open, not navigate.
• Enter, Escape and Tab must work for keyboard users.

Should dropdowns open on hover or click?

Click is the more reliable choice because it behaves the same on every device and only opens when the visitor asks. Hover can be quicker for mouse users, but menus that open the moment the pointer crosses them get in the way. Nielsen Norman Group's dropdown guidelines recommend short delays so menus do not open or close by accident.

• How clear website navigation improves user experience
• Fitts's law: why bigger, closer links are easier to use

How should dropdowns behave on touch screens?

Touch screens have no hover. If the parent item is both a link and a dropdown trigger, a tap may navigate before the visitor sees the options. Make the first tap open the dropdown, or use a separate arrow button, and put a link to the section overview inside the dropdown. Test on a real tablet.

• Nested menus on mobile: sub-menus that open and close

How should dropdowns work with a keyboard?

Keyboard users must be able to open the dropdown with Enter or Space, move through its links with Tab, and close it with Escape. WCAG 2.2 success criterion 1.4.13 asks that content appearing on hover or focus can be dismissed, stays visible while the pointer is over it and does not vanish unexpectedly.

• Keyboard accessibility: can your site work without a mouse?
• Accessible navigation: clearer for every visitor

What design details matter?

Small details decide whether dropdowns feel solid or fiddly.

• An arrow or chevron showing the item opens a menu.
• Enough width for full labels without wrapping.
• No gap between parent and dropdown where the pointer falls through.
• Full-width clickable items, not just the text.
• One level only; avoid fly-outs within fly-outs.
• A clear close action on touch screens.

When should you avoid dropdowns altogether?

If you have only a few pages, show them all as top-level items. Dropdowns add a step and hide options, so they should earn their place by grouping related pages. Avoid putting the most important page, such as contact or prices, inside one.

• Mega menus: when a small business website needs one
• Progressive disclosure: basics first, details on demand

What does this look like in practice?

A pattern we see: a 'Services' dropdown opens on hover, closes the instant the pointer drifts and navigates to an empty page when tapped on an iPad. Switching to click-to-open, adding a chevron and putting a 'All services' link inside fixes desktop, tablet and keyboard use together.

• See client work
• Website Design & Development for UK businesses

Dropdown checklist

• Open on click, or hover with delays.
• Show a chevron on parent items.
• First tap opens on touch screens.
• Enter opens, Escape closes, Tab moves.
• One level only.
• Test on mouse, tablet and keyboard.

• Utility navigation: login, basket and search, out of the way
• Vertical vs horizontal navigation: side menu or top menu?

Next step

Try your dropdowns on a tablet and with only a keyboard, and note anything that fails.