Home/Components/Dropdown menu

Dropdown menu

A floating list of actions anchored to a trigger. Row actions, "More" buttons, account menus all live here.

Stable .dropdown Canonical Anchored popover

Canonical menu primitive.

Per audit-reuse D-5, .dropdown is the canonical class for floating action lists. The legacy .menu, .context-menu and .user-menu classes still ship as deprecation aliases; treat them as .dropdown, .dropdown.dropdown--compact and .dropdown.dropdown--user in new code.

Default

Floating list, popover shadow, hairline border. Hover row in surface-muted.

View receipt
Print
Export PDF
Reissue
Void this sale
Row actions menu

With groups

Group headers in caption tone, separator between groups.

Account
My profile
Preferences
Security
Workspace
Mukamba Group
Members & roles
Billing
Sign out
Account menu

With checkable items

Filter dropdowns; current selections show a check.

Show columns
Receipt #
Cashier
Customer
Items
Total
Tendered
Change
Checkable items menu

Do & don't

Do

Group items. A long flat list of 12 actions is impossible to scan.

Don't

Open a dropdown on hover. Always click-to-open.

Do

Put dangerous actions at the bottom and colour them — separated by a divider.

Don't

Use a dropdown for navigation between pages. Use a sidebar.