Dropdown components you can take apart

April 1, 2026 | 6 min read | Copy link Copied | Lab

Dropdowns are the thing everyone thinks they know. You open a menu, you pick an item, done. But try building one that actually feels good and you’re suddenly dealing with hover delays, animation timing, diagonal mouse paths, and physics simulations for a fan speed controller that nobody asked for.

I wanted to see how deep it goes. Seven sections, each taking one piece apart. Toggles to flip between variants, code you can copy.

01 / Trigger States

The button you click before anything happens. Four styles, each handling hover, press, and open states.

Outline and Ghost are safe picks for toolbars and secondary actions. Solid works when the dropdown is the primary action on the page. Gradient is personality, brand-heavy interfaces where the trigger needs to stand out.

Tech talk

All four shrink slightly on press and track hover and open states independently. Colors are hardcoded per theme in the generated code. Not ideal for a design system, but it means you can copy a snippet and use it immediately. Swap the color values for CSS variables later if you need to.

02 / Open Animations

You clicked the trigger. Now what? The menu can open four ways. Fade, scale, slide, and spring physics.

Fade and Slide are safe for any context. Scale works when the menu needs to feel connected to its trigger. Spring adds personality but can feel heavy in dense interfaces. Exit is always faster than enter. Slower exit feels like lag.

Tech talk

Fade is a straight opacity tween. Slide adds vertical offset. Both use easing curves. Scale grows from the trigger origin, giving spatial context. Spring uses stiffness and damping to produce natural overshoot no single easing curve can match. Hit slow motion to see the differences.

03 / Menu Appearance

Same six items, four shadow styles. This is what makes a dropdown stop looking like a browser default.

Elevated and Layered fit productivity tools where the menu needs to feel solid. Glass works over rich backgrounds, images, or video. Soft disappears into light interfaces where the menu shouldn’t compete for attention.

Tech talk

Elevated stacks three layers: outer ring, inner bevel shadow, small drop shadow. Layered uses four shadow passes, each doubling offset and blur, for convincing depth. Glass swaps the opaque fill for backdrop-filter blur. Soft pools two diffused shadows underneath, the kind of light you get from an overhead panel, not a point source.

04 / Item Hover Effects

The menu is open. Which row are you pointing at?

Fill is the safe default for any menu. Accent adds a left bar that draws the eye on long lists. Gradient works over dark backgrounds where a solid fill would clash. Combine them when the hover needs to do more work.

Tech talk

Fill uses opacity animation, no harsh CSS flash. Accent mounts a 2px bar with scaleY via AnimatePresence. Gradient layers a horizontal fade, compositor-only, so it’s cheap. Fill + Accent combines both: background fades in while the accent bar scales into view.

05 / Submenu

Menus inside menus. Flyout keeps both levels visible at once. Drill-down replaces the current view entirely. Two different mental models for the same problem.

Flyout works for desktop context menus and short hierarchies. Breaks on touch. Drill-down fits everywhere, mobile nav, settings panels, anywhere the screen is narrow or each level is self-contained. Click in, click back.

Tech talk

Hover delay matters: 80ms open, 220ms close. The four animation presets show how timing changes the whole feel. Fade is barely there. Tween is the safe default. Spring has a physical overshoot. Pop exaggerates the entrance for personality.

06 / Safe Triangle

The thing that makes submenus actually work. Without it, moving diagonally toward a submenu crosses other rows and the panel closes. Try it on the left. Then try the right.

Left demo is naive hover. Whatever row you touch becomes active, submenu closes instantly. Right demo solves it. Toggle the debug overlay to watch it in real time.

Tech talk

A triangle drawn from cursor to submenu edges. Move right and the vertex freezes into a stable cone. Move left past the freeze point and it re-attaches. Inspired by @sorenblank who built a prediction cone snippet using an SVG safe zone approach. This implementation goes a different route: ray-casting point-in-polygon in a requestAnimationFrame loop. No overlay div, no clip-path. Pure math.

07 / List Item Types

Past the basics. Three menu patterns you won’t find in standard component libraries. An audio mixer, a tag manager with inline color editing, and a fan speed controller with physical momentum.

Mixer puts channel faders inside a dropdown. Color Tags handles inline editing with remove animations. Fan Speed adds physical inertia to a slider. None of these belong in a standard component library. They’re what happens when a dropdown stops being a list of links.

Tech talk

Mixer uses gradient fills per channel with the thumb sitting inside the fill, not on top. Color Tags expands a palette inline on swatch click. The two remove modes differ: Dissolve scatters particles via canvas overlay, Cascade ripples neighbors with spring physics. Fan Speed shifts its color gradient warm-to-cool across RPM and includes a realtime sparkline.

08 / Get the source

Every component from every section is in one repo. React, motion, Tailwind, and lucide-react for the icons. Keyboard nav and ARIA roles are built in but not the focus of this lab. Including the fan speed controller that nobody asked for. Clone it, break it apart, rebuild it however you want.

dembsky/labs View on GitHub