Components
DropdownMenu
A contextual menu for displaying a list of actions or options.
Installation
npm install @mijn-ui/react-dropdown-menuUsage
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@mijn-ui/react-dropdown-menu"<DropdownMenu>
<DropdownMenuTrigger>Open</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Billing</DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuItem>Subscription</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Examples
Checkboxes
Radio Group
API Reference
Built on Radix UI — all underlying primitive props are forwarded in addition to the props below.
| Prop | Type | Default | Description |
|---|---|---|---|
unstyled | boolean | false | Opt out of the default styles to fully customize the component. |
classNames | object | — | Override classes per slot (see Style Slots below). |
className | string | — | Additional classes for the root element. |
DropdownMenu Style Slots
| Slot Name | Targeted Component | Purpose |
|---|---|---|
base | DropdownMenu | Styles the root dropdown menu component. |
trigger | DropdownMenuTrigger | Styles the trigger button for the menu. |
content | DropdownMenuContent | Styles the dropdown content. |
item | DropdownMenuItem | Styles individual dropdown menu items. |
subTrigger | DropdownMenuSubTrigger | Styles the trigger for submenu activation. |
subTriggerIcon | DropdownMenuSubTrigger | Styles the icon within the submenu trigger. |
subContent | DropdownMenuSubContent | Styles the content of the submenu content. |
checkboxItem | DropdownMenuCheckboxItem | Styles the checkbox menu item. |
checkboxItemIconWrapper | DropdownMenuCheckboxItem | Styles the wrapper for the checkbox icon. |
checkboxItemIcon | DropdownMenuCheckboxItem | Styles the checkbox icon. |
radioItem | DropdownMenuRadioItem | Styles the radio menu item. |
radioItemIconWrapper | DropdownMenuRadioItem | Styles the wrapper for the radio icon. |
radioItemIcon | DropdownMenuRadioItem | Styles the radio icon. |
label | DropdownMenuLabel | Styles the menu label. |
separator | DropdownMenuSeparator | Styles the separator between menu items. |
shortcut | DropdownMenuShortcut | Styles shortcut text within the menu. |