# ActionMenu

A compact menu of real actions, with disabled and destructive states.

- Family: Navigation, imported from `mizu-ui` or `mizu-ui/navigation`
- Docs: https://mizu.user64bit.world/components/action-menu
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/navigation/ActionMenu.tsx

## Usage

```tsx
"use client";

import { useState } from "react";
import { ActionMenu } from "mizu-ui";

export function Example() {
  const [status, setStatus] = useState("No action selected.");
  return (
    <div>
      <ActionMenu
        items={[
          {
            id: "copy",
            label: "Duplicate record",
            onSelect: () => setStatus("Record duplicated."),
          },
          {
            id: "archive",
            label: "Archive record",
            onSelect: () => setStatus("Record archived."),
          },
          {
            id: "delete",
            label: "Delete record",
            danger: true,
            onSelect: () => setStatus("Record deleted."),
          },
        ]}
      />
      <p role="status" className="mizu-field-hint">
        {status}
      </p>
    </div>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/action-menu
```

## Props

- `items`: `MenuAction[]`. Stable id, label, callback and optional disabled/danger flags.
- `label`: `string` (default `"Actions"`). Trigger and menu name.

## Accessibility

Native disclosure, named actions, arrow/Home/End navigation and Escape focus restoration. Pointer outside dismisses.

## Motion

CSS transitions explain state changes. Reduced motion removes travel.