Components
DropdownMenu
A contextual menu for displaying a list of actions or options.
Loading...
Installation
NPM packages are currently unstable and may cause issues. Use it at your own risk.
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
Loading...
Radio Group
Loading...
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. |