Dropdown Menu — Free HTML CSS JS Snippet

A dropdown menu reveals a list of options from a trigger button — account menus, action menus (see the popover and right-click context menu variants), settings navigation, filter controls. It is one of the most common interactive patterns in web applications. The difference between a good and bad dropdown implementation comes down to three things: how it opens, how it closes, and whether it responds to keyboard input.

How the open animation works

The .menu starts in its closed state: opacity: 0, transform: translateY(-6px) scale(0.97), and pointer-events: none. The transform-origin: top left anchors the scale animation at the corner closest to the trigger button, so the menu appears to emerge from that point. When the parent .dropdown gains the .open class via JavaScript, a 0.15s CSS transition fires: opacity: 1, transform: translateY(0) scale(1). The 3% scale difference and 6px vertical shift are subtle but give the menu a polished "expanding" quality rather than just appearing.

The click-outside close pattern

A single document.addEventListener('click', e => { if (!e.target.closest('.dropdown')) { ... remove .open } }) handles closing on outside clicks. e.target.closest('.selector') traverses the DOM upward from the click target and returns the nearest ancestor matching the selector — or null if none exists. If the click was on the trigger or anywhere inside the dropdown container, closest returns the element and the menu stays open. If the click was outside, it returns null and the menu closes. This pattern works with any number of dropdowns on the page.

ESC key keyboard support

A keydown listener closes all open dropdowns when e.key === 'Escape'. This is required for basic keyboard accessibility — users who opened the menu with Enter should be able to close it with Escape.

Menu item variants

Menu items use .menu-item for standard items. .divider creates a 1px horizontal separator between sections. .danger changes the text to red and applies a red-tinted hover background — the standard convention for destructive actions like "Delete account" or "Revoke access" (confirm them with a confirm dialog).

Pointer-events: none when closed

The closed state uses pointer-events: none. Without this, the invisible menu would intercept clicks on elements behind it. The .open state removes this restriction.

The scale + opacity animation

The dropdown starts at transform: scale(0.97); opacity: 0; pointer-events: none. Adding .open switches to scale(1); opacity: 1; pointer-events: all with CSS transition. The scale(0.97) start point creates a subtle zoom-in that makes the dropdown feel like it "pops" from the trigger. The 0.97 value is small enough to be subtle but enough to create the appearance of depth — the dropdown is slightly smaller than its final size when it first appears.

The transform-origin

transform-origin: top right (for a right-aligned dropdown) or top left (for left-aligned) ensures the scale animation originates from the corner closest to the trigger button. Without a correct transform-origin, the dropdown scales from its centre, which looks disconnected from the trigger.

Click-outside detection

e.target.closest('.dropdown') returns the nearest .dropdown ancestor of the clicked element. If null, the click was outside all dropdowns and the close() function fires. This single document click listener handles all dropdowns on the page without per-dropdown listeners. Add document.addEventListener inside the open() function and remove inside close() to avoid accumulating listeners.