Dropdown Menu

Compact action menu for grouped commands, secondary controls, and contextual operations that should stay close to their trigger.

AccessibleDark ModeAnimatedKeyboard Nav

Install

$npx react-principles add dropdown-menu

Live Demo

Open in Storybookopen_in_new

Code Snippet

src/ui/DropdownMenu.tsx

import { DropdownMenu } from "@/ui/DropdownMenu";

<DropdownMenu>
  <DropdownMenu.Trigger>Open menu</DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Label>Actions</DropdownMenu.Label>
    <DropdownMenu.Item onSelect={() => console.log("Rename")}>Rename</DropdownMenu.Item>
    <DropdownMenu.Item inset onSelect={() => console.log("Duplicate")}>Duplicate</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

Copy-Paste (Single File)

DropdownMenu.tsx

import { createContext, useContext, useEffect, useRef, useState, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface DropdownMenuProps {
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  children: ReactNode;
  className?: string;
}

Props

Prop	Type	Default	Description
`open`	`boolean`	`—`	Controlled open state for the menu.
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage.
`onOpenChange`	`(open: boolean) => void`	`—`	Called whenever the menu opens or closes.
`className`	`string`	`—`	Additional classes applied to the root wrapper.
`DropdownMenu.Trigger`	`ButtonHTMLAttributes<HTMLButtonElement>`	`—`	Button that toggles the menu.
`DropdownMenu.Content`	`HTMLAttributes<HTMLDivElement>`	`—`	Floating content surface that contains labels, items, and separators.
`DropdownMenu.Item.inset`	`boolean`	`false`	Adds extra left padding for nested or secondary items.
`DropdownMenu.Item.onSelect`	`() => void`	`—`	Convenience callback invoked before the menu closes.
`DropdownMenu.Label`	`HTMLAttributes<HTMLDivElement>`	`—`	Section label for grouped menu items.
`DropdownMenu.Separator`	`HTMLAttributes<HTMLDivElement>`	`—`	Visual divider between menu sections.

react-principles