DropdownMenu

Installation

NPM packages are currently unstable and may cause issues. Use it at your own risk.

npm install @mijn-ui/react-dropdown-menu

Usage

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

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.

Installation

Usage

Examples

Checkboxes

Radio Group

DropdownMenu Style Slots

On this page