Components
Dropdown menu
A flat, bordered list of actions anchored to a trigger. Full-width .ds-menu__item buttons shift to the alt surface on hover; a danger modifier, 1px dividers, and uppercase headers organise longer menus.
Anatomy
A .ds-menu surface holds .ds-menu__item rows. Use .ds-menu__header for an uppercase group label, .ds-menu__divider for a 1px rule, and .ds-menu__item--danger for a destructive action.
<div class="ds-menu" role="menu">
<div class="ds-menu__header">Reference</div>
<button class="ds-menu__item" role="menuitem">Edit grid</button>
<button class="ds-menu__item" role="menuitem">Duplicate</button>
<a class="ds-menu__item" role="menuitem" href="#">Export CSV</a>
<div class="ds-menu__divider" role="separator"></div>
<button class="ds-menu__item ds-menu__item--danger" role="menuitem">Delete</button>
</div>Interactive
A trigger toggles the menu; it closes on outside-click or Escape. The small inline script below wires this demo (no dependencies).
<div class="ds-dropdown" data-dropdown>
<button class="ds-button" data-dropdown-trigger aria-haspopup="menu" aria-expanded="false">Actions</button>
<div class="ds-menu" role="menu" data-dropdown-menu hidden>
<button class="ds-menu__item" role="menuitem">Edit grid</button>
<button class="ds-menu__item" role="menuitem">Duplicate</button>
<div class="ds-menu__divider" role="separator"></div>
<button class="ds-menu__item ds-menu__item--danger" role="menuitem">Delete</button>
</div>
</div>React
The Dropdown manages open state, closes on outside-click / Escape, and moves focus between items with the arrow keys. Pass a trigger and render MenuItem children.
import { Dropdown, MenuItem, MenuDivider, Button } from "@diametral/design-system/react";
<Dropdown align="start" trigger={<Button>Actions</Button>}>
<MenuItem onClick={editGrid}>Edit grid</MenuItem>
<MenuItem onClick={duplicate}>Duplicate</MenuItem>
<MenuDivider />
<MenuItem danger onClick={remove}>Delete</MenuItem>
</Dropdown>