Dropdown
A dropdown list
Dropdowns are ideal when you have multiple options to choose from: hovering or clicking on the trigger reveals a menu that allows you to select an option and execute the relevant action.
The component supports two selection modes: single select, which highlights the active option with a left-edge indicator bar, and multi select, which uses a checkbox per item. Both modes support disabled options and a separator to group related items.
Light & dark theme
All dropdown tokens are remapped under data-theme="light" and data-theme="dark" — background, border, shadow, and item colors adapt automatically.
Both previews are locked — they don't follow the page theme switcher. Toggle the page theme to see the rest of the documentation cascade.
Token reference
Every dropdown surface and item state resolves to a handful of custom properties. Override these on a wrapper — never on the .nm-dropdown rule itself.
| Token | Role |
|---|---|
--nm-dropdown-bg | Menu container background |
--nm-dropdown-border | Menu container border |
--nm-dropdown-shadow | Drop shadow under the menu |
--nm-dropdown-item-text | Default item label color |
--nm-dropdown-item-hover-bg | Item background on hover |
--nm-dropdown-item-active-bg | Selected item background |
--nm-dropdown-item-active-fg | Selected item label color and indicator bar color |
--nm-dropdown-separator | <hr> divider color between item groups |
Geometry is fixed, not tokenized: 8px container radius, 4px padding, 32px minimum item height, 4px hover/selected item radius.