Dropdown Menu

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 and a smooth 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, 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, 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.