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 .menu Anchored popover

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.