---
title: "Dropdown Menu"
description: "A dropdown menu hides a list of options behind a button or nav item and reveals them on interaction. Learn how it works and the UX best practices."
url: "https://nodea.io/en/glossary/dropdown-menu"
lang: "en"
updated: "2026-07-13"
---

# Dropdown Menu

> A dropdown menu is a user-interface element that hides a list of options and reveals it only when the user clicks, taps or hovers over a parent element.

A **dropdown menu** is a user-interface element that hides a list of options by default and reveals it only after an interaction — a click, tap or hover on a parent element. This lets it pack many related items into a compact space without cluttering the view, making it one of the core patterns for both navigation and forms.

## How a dropdown menu works

A dropdown consists of a trigger (a button, navigation item or select field) and a hidden container of options that appears on top of the content when activated. In code it is usually built with HTML, CSS and JavaScript, and inside forms with the native *\<select\>* element. A well-built dropdown should:

- respond to mouse, keyboard and touch input alike;
- close when the user clicks outside the menu area;
- be exposed to screen readers through ARIA attributes;
- stay within the viewport on small screens too.

A good dropdown supports an intuitive [interface](https://nodea.io/en/glossary/ui) and a smooth [UX](https://nodea.io/en/glossary/ux). The trigger method matters too: hover-to-open feels convenient on desktop but fails on touch screens, where no hover state exists — there, opening on click or tap works better.

## Practical applications

You will find dropdown menus in main navigation (expandable shop categories), admin panels, product filters, and forms that let users pick a country, language or currency. On mobile devices they often work alongside a [hamburger menu](https://nodea.io/en/glossary/hamburger-menu), which hides the whole navigation behind a single icon. The key to a good dropdown is restraint: deeply nested levels tire users and hurt [responsiveness](https://nodea.io/en/glossary/responsive-design), so it pays to limit the number of levels and group options logically. From an SEO perspective, remember that if a menu is generated purely by JavaScript and does not appear in the source markup, crawlers may fail to reach the links hidden inside it. A well-built dropdown therefore stays present in the HTML, operable by keyboard and legible to assistive technology, which improves usability and search visibility at the same time.

### When should I use a dropdown menu versus a hamburger menu?

A dropdown menu is best for grouping related options under a single navigation item, such as expandable categories. A hamburger menu tucks an entire navigation behind one icon and is typical on mobile, where there is no room for a horizontal bar.

## Related

- [Hamburger menu](https://nodea.io/en/glossary/hamburger-menu)
- [UI](https://nodea.io/en/glossary/ui)
- [UX](https://nodea.io/en/glossary/ux)
- [Faceted Navigation](https://nodea.io/en/glossary/faceted-navigation)
- [Responsive Design](https://nodea.io/en/glossary/responsive-design)

---

Languages: [pl](https://nodea.pl/pl/slownik-pojec/dropdown-menu.md)  
Site index: [llms.txt](https://nodea.io/en/llms.txt)