Storybook stories file for the `ActionsMenu` and `ActionsMenuDropdown` components, providing interactive visual documentation of all supported menu variants and item types.
## Key Components
**Stories exported:**
| Story | Description |
|---|---|
| `Default` | Single-group menu with icon items |
| `GroupedWithDanger` | Multi-group menu with separator and destructive delete row |
| `WithCheckboxes` | Checkbox-type items with checked/unchecked states |
| `WithSubmenu` | Nested submenu via `ActionsMenuDropdown` (requires Radix DropdownMenu context) |
| `WithDisabledItem` | Dimmed, non-interactive disabled row |
| `WithSecondaryAction` | Row with an independently clickable secondary icon button (e.g. open in new tab) |
| `Dropdown` | `ActionsMenuDropdown` with an ellipsis trigger button |
**Key props documented:**
- `groups` — Array of `ActionsMenuGroup` objects, each containing an array of items
- `className` — Additional CSS classes for the menu panel
- `onItemClick` — Callback fired when any item is activated
## Usage Example
```typescript
import { ActionsMenu, ActionsMenuDropdown } from '../components/ui/actions-menu';
// Inline panel
, onClick: handleEdit },
{ id: 'download', label: 'Download', icon: , onClick: handleDownload },
],
},
{
id: 'destructive',
items: [
{ id: 'delete', label: 'Delete', icon: , danger: true, onClick: handleDelete },
],
},
]}
/>
// Trigger-attached dropdown
```
> **Note:** Submenu items (`type: 'submenu'`) require `ActionsMenuDropdown` — the inline `ActionsMenu` panel has no Radix DropdownMenu context.
## Source
[`ActionsMenu.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/ActionsMenu.stories.tsx)