Overlays

Dropdown menu

A menu of actions opened from a button (the ARIA menu button pattern). Keyboard: Enter, Space or arrows open it with focus on an item; arrows, Home/End and typing move; Enter or Space runs the item; Escape closes and returns focus to the trigger; Tab closes. The focused item fills with pixels.

demos/dropdown-menu.tsx

import { Button } from "pixelbits/button";
import {
  DropdownCheckboxItem,
  DropdownItem,
  DropdownLabel,
  DropdownMenu,
  DropdownSeparator,
} from "pixelbits/dropdown-menu";
import { useState } from "react";

export default function Demo() {
  const [grid, setGrid] = useState(true);
  return (
    <DropdownMenu trigger={<Button>Account</Button>}>
      <DropdownLabel>ali@studio</DropdownLabel>
      <DropdownItem shortcut="⇧ P">Profile</DropdownItem>
      <DropdownItem shortcut="⌘ ,">Settings</DropdownItem>
      <DropdownCheckboxItem checked={grid} onCheckedChange={setGrid}>
        Show grid
      </DropdownCheckboxItem>
      <DropdownSeparator />
      <DropdownItem variant="danger">Sign out</DropdownItem>
    </DropdownMenu>
  );
}

Installation

npm: import

import { DropdownMenu, DropdownItem, DropdownSeparator } from "pixelbits/dropdown-menu";

shadcn: copy the source

npx shadcn add https://pixelbits.ali-moradi-develop.com/r/dropdown-menu.json

API

<DropdownMenu>

Example

<DropdownMenu trigger={<IconButton aria-label="More"><MoreIcon /></IconButton>}>
  <DropdownLabel>ali@studio</DropdownLabel>
  <DropdownItem shortcut="⌘ ," onSelect={openSettings}>Settings</DropdownItem>
  <DropdownSeparator />
  <DropdownItem variant="danger" onSelect={signOut}>Sign out</DropdownItem>
</DropdownMenu>

Prop	Type	Default	Description
trigger*	ReactElement	—	The element that opens the menu, usually a `Button` or `IconButton`.
open	boolean	—	Whether it is open (controlled).
defaultOpen	boolean	false	Open on first render (uncontrolled).
onOpenChange	(open: boolean) => void	—	Called when it opens or closes.
align	"start" \| "center" \| "end"	"start"	Horizontal alignment with the trigger.
children*	ReactNode	—	`DropdownItem`, `DropdownCheckboxItem`, `DropdownLabel`, `DropdownSeparator`.

Also accepts every prop of Omit<HTMLAttributes<HTMLDivElement>, "title">.

<DropdownItem>

One action in a DropdownMenu.

Prop	Type	Default	Description
onSelect	() => void	—	Runs when the item is chosen (click, Enter, Space). The menu then closes.
variant	"default" \| "danger"	"default"	`"danger"` colors the item red, for destructive actions.

Also accepts every prop of ItemBase.

<DropdownCheckboxItem>

A menu item that toggles an option (menuitemcheckbox).

Prop	Type	Default	Description
checked*	boolean	—	Whether the option is on.
onCheckedChange*	(checked: boolean) => void	—	Called with the new state when chosen. The menu then closes.

Also accepts every prop of ItemBase.

<DropdownLabel>

A small heading for a group of items (not focusable).

<DropdownSeparator>

A hairline between groups of items.