1 variant

Action Menu

A dropdown menu with icons, shortcuts, toggles, and destructive actions.

usage.tsx

import { Settings, User } from "lucide-react";
import {
  ActionMenu,
  ActionMenuContent,
  ActionMenuItem,
  ActionMenuTrigger,
} from "@/components/registry/action-menu";

export function AccountMenu() {
  return (
    <ActionMenu>
      <ActionMenuTrigger aria-label="Open menu">⋯</ActionMenuTrigger>
      <ActionMenuContent>
        <ActionMenuItem icon={<User className="h-4 w-4" />}>Profile</ActionMenuItem>
        <ActionMenuItem icon={<Settings className="h-4 w-4" />} shortcut="⌘,">
          Settings
        </ActionMenuItem>
      </ActionMenuContent>
    </ActionMenu>
  );
}

"use client";

import { Check } from "lucide-react";
import { motion, useReducedMotion } from "motion/react";
import {
  type ButtonHTMLAttributes,
  createContext,
  type KeyboardEvent,
  type ReactNode,
  type RefObject,
  useCallback,
  useContext,

307 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/action-menu

Props

ActionMenu

openboolean

Pass it to control the menu yourself. Left off, the menu keeps its own state.

defaultOpenbooleanDefault false

Starting state when uncontrolled.

onOpenChange(open: boolean) => void

Called whenever the menu wants to open or close.

childrenRequiredReactNode

A trigger and a content panel.

classNamestring

Merged last, so anything passed here wins over the component's own classes.

ActionMenuTrigger

childrenRequiredReactNode

Usually a single icon. Give the button an aria label when it is.

...propsButtonHTMLAttributes

Everything except type, id, onClick and onKeyDown, which the menu owns.

ActionMenuContent

align"start" | "end"Default "start"

Which trigger edge the panel hangs from. It flips above the trigger on its own when there is no room below.

childrenRequiredReactNode

Items, toggle items, labels and separators.

classNamestring

Merged last, so anything passed here wins over the component's own classes.

ActionMenuItem

onSelect() => void

Runs, then closes the menu and returns focus to the trigger.

disabledbooleanDefault false

Skipped by arrow key navigation as well as by the pointer.

iconReactNode

Leading mark, hidden from screen readers.

shortcutstring

Trailing hint, such as ⌘K.

destructivebooleanDefault false

Colors the item for something that deletes.

childrenRequiredReactNode

The label.

classNamestring

Merged last, so anything passed here wins over the component's own classes.

ActionMenuToggleItem

checkedRequiredboolean

Drives the check mark and aria checked.

onCheckedChangeRequired(checked: boolean) => void

The menu stays open, since a toggle is not a navigation.

disabledbooleanDefault false

Skipped by arrow key navigation.

childrenRequiredReactNode

The label.

classNamestring

Merged last, so anything passed here wins over the component's own classes.