Dropdown Menu Component

Overview

Dropdown Menu expands its panel from the trigger while items enter in a staggered sequence. A shared highlight glides between rows, labels can roll on hover, and the trigger value rolls when the selection changes. It also supports hover opening, type-to-jump, and a short close delay so users see their choice confirmed.

Use it when related actions or choices should stay available without taking permanent space, such as delivery schedules, notification preferences, report settings, or toolbar commands.

Theme and Interaction Customisation

Adjust title weight, optional item descriptions, a checkmark selection indicator, sliding or top-fill hover highlights, and a plus or chevron trigger icon. Motion controls cover panel animation, duration, delay, stagger, rolling text, press feedback, hover activation, Exit fast, and Close delay on select.

Example Production Use Case

A subscription store can use it on the account page for delivery frequency. Customers see the current schedule in the trigger, pick Every month from a described list, and the trigger rolls to the new value once saved.

A reporting dashboard can place it in the header for date intervals and export formats, keeping the toolbar compact while every option stays a click away.

A project tool can use it as a row action menu for rename, duplicate, and archive, with descriptions clarifying what each command does.

Best Used For

• Subscription management and recurring-service settings.
• SaaS application settings with short option lists.
• Reporting intervals and export settings.
• Product configuration with a few related options.
• Application toolbars grouping secondary commands.
• Project tools configuring review cycles and reminders.
• Account preferences like notification frequency.
• Administrative interfaces with infrequent actions.

Not For

When users need to compare alternatives side by side, Radio or a visible option group works better.

Very large option sets need a searchable combobox, since type-to-jump doesn’t replace real search.

It isn’t primary navigation, and destructive actions like deletion or permission changes still need a proper confirmation step.

Performance Budget

Avoid measuring the panel on every frame, keep stagger and rolling labels restrained, and use one shared highlight rather than animating every row. Use Exit fast for quicker dismissal, clear timers and listeners on close, and let the latest open or closed state win.

Accessibility and Mobile

Give the trigger an accessible name and expanded state, support arrow keys, Enter, and Escape, and return focus to the trigger on close. Keep hover and selected states distinct, and choose menu, menuitemradio, or listbox semantics to match the actual use. On mobile, avoid relying on hover, keep items easy to tap and inside the viewport, and with reduced motion simplify the panel, stagger, and rolling text.

Common Mistakes

• Confusing the hover highlight with the selected value.
• Delaying the real state change until animations finish.
• Using long item staggers in short menus.
• Keeping staggered exits when Exit fast is enabled.
• Making hover the only way to open the menu.
• Using the wrong accessibility roles for commands versus selects.
• Leaving focus inside a closed panel.
• Letting the popup clip at viewport edges.
• Assuming a selected value has been saved.
• Ignoring reduced-motion preferences.