DropdownMenu
Dropdown menus group secondary commands behind a compact trigger.
Overview and decision boundary
Use DropdownMenu to group secondary commands behind a compact trigger.
Do not hide the primary page action inside a menu.
Preview
import { DropdownMenu } from '@nerio-ui/ui/client';<DropdownMenu trigger="Actions" items={[{ label: "Rename" }]} />Installation and imports
Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.
pnpm dlx nerio add dropdown-menuimport { DropdownMenu } from '@nerio-ui/ui/client';Usage
import { DropdownMenu } from '@nerio-ui/ui/client';<DropdownMenu trigger="Actions" items={[{ label: "Rename" }]} />Variants
| Variant | Purpose |
|---|---|
default | Default variant using semantic Nerio tokens. |
destructive | Risky action that needs explicit intent. |
Anatomy
| Slot | Purpose |
|---|---|
content | Layered menu surface. |
item | Command row with optional destructive intent. |
States
| State | Purpose |
|---|---|
Open | Items are keyboard navigable. |
Highlighted | Current item is ready for selection. |
Disabled | Unavailable items stay in context without activation. |
Motion
- State changes should use shared motion tokens and preserve reduced-motion behavior.
Accessibility
- Uses the Base UI Menu primitive.
- Items are keyboard reachable and can be disabled.
- Disabled items stay visible but cannot be selected.
- Use destructive tone only for irreversible or high-risk commands.
- Supports controlled open, uncontrolled defaultOpen, onOpenChange, and a forwarded menu popup ref.
API
| Prop | Purpose |
|---|---|
items | Small list of label, onSelect, disabled, and destructive flags. |
disabled item | Stays visible in context without activation. |
destructive item | Marks risky commands without changing the whole menu tone. |
Implementation contract
| Contract | Value |
|---|---|
Registry item | dropdown-menu installs 6 source files into the configured components directory. |
Base UI | menu |
Registry dependencies | button |
Package dependencies | @base-ui/react, clsx, react, tailwind-merge, tailwindcss |
Styling contract
| Contract | Value |
|---|---|
Authoring | Complete, statically detectable Tailwind CSS v4 recipes own component visuals. |
Values | Semantic and component --n-* variables remain the canonical customization layer. |
Overrides | Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically. |
Residual CSS | Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer. |
Design notes
- Use DropdownMenu to group secondary commands behind a compact trigger.
Do / do not
Do
Use for Rename, Duplicate, Archive, and similar secondary commands.
Do not
Do not hide the primary page action inside a menu.
Related components
Tokens
These are the primary customization points. Override semantic or component tokens instead of changing component source.
| Token | Purpose |
|---|---|
--n-dropdown-min-width | Public customization point for this component contract. |
--n-dropdown-item-padding-inline | Public customization point for this component contract. |
--n-dropdown-radius | Public customization point for this component contract. |
--n-overlay-z-index | Public customization point for this component contract. |
--n-overlay-background | Public customization point for this component contract. |
--n-overlay-border | Public customization point for this component contract. |
--n-overlay-foreground | Public customization point for this component contract. |
--n-overlay-foreground-muted | Public customization point for this component contract. |
--n-overlay-control-background | Public customization point for this component contract. |
--n-overlay-surface-filter | Public customization point for this component contract. |
--n-overlay-danger | Public customization point for this component contract. |
--n-overlay-shadow | Public customization point for this component contract. |
--n-motion-hover-duration | Public customization point for this component contract. |
--n-motion-hover-easing | Public customization point for this component contract. |
--n-motion-overlay-enter-duration | Public customization point for this component contract. |
--n-motion-overlay-enter-easing | Public customization point for this component contract. |
--n-motion-overlay-exit-duration | Public customization point for this component contract. |
--n-motion-overlay-exit-easing | Public customization point for this component contract. |
--n-focus-ring | Public customization point for this component contract. |