Dropdown Menu

Displays a floating menu to the user — such as a set of actions or functions — triggered by a button.

Installation

pnpm add @inpulse-ds/dropdown-menu

Usage

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@inpulse-ds/dropdown-menu';
 
export function Demo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger>Open</DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuLabel>My Account</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Profile</DropdownMenuItem>
        <DropdownMenuItem>Billing</DropdownMenuItem>
        <DropdownMenuItem>Sign out</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Examples

Standard

You can separate menu items with the DropdownMenuSeparator component. Use the DropdownMenuLabel component to add a title to sections of your menu.

Menu with arrow

To append an arrow to the menu, add the DropdownMenuArrow component inside the DropdownMenuContent. In the example below, items will be disabled. This can be done by adding the disabled prop to the DropdownMenuItem component.

Menu with checkboxes

Use the DropdownMenuCheckboxItem component to add items that can be selected. In the example below, the "Billing" item is selected.

Menu with radio buttons

Use the DropdownMenuRadioItem component to add items that can be selected in a group. In the example below, the "Dark" item is selected.