# Dropdown Menu

> Menu surface with `role="menu"` + `menuitem`, arrow key nav, type-ahead, and submenu support.

- Available in: `@sisyphos-ui/react`, `@sisyphos-ui/vue`, `@sisyphos-ui/angular`
- Docs: https://sisyphosui.com/docs/components/dropdown-menu

## Installation

Pick the framework binding that matches your stack:

```bash
pnpm add @sisyphos-ui/react   # React 18+
pnpm add @sisyphos-ui/vue     # Vue 3+
pnpm add @sisyphos-ui/angular # Angular 17+
```

## Import

```tsx
import "@sisyphos-ui/react/styles.css";
import { DropdownMenu } from "@sisyphos-ui/react";
```

## Framework usage

### React 18+

```tsx
import { DropdownMenu, Button } from "@sisyphos-ui/react";

export const RowActions = () => (
  <DropdownMenu
    items={[
      { label: "Edit", onSelect: () => {} },
      { label: "Duplicate", onSelect: () => {} },
      { type: "separator" },
      { label: "Delete", destructive: true, onSelect: () => {} },
    ]}
  >
    <Button variant="outlined">Actions ▾</Button>
  </DropdownMenu>
);
```

### Vue 3+

```vue
<script setup lang="ts">
import { DropdownMenu, Button } from "@sisyphos-ui/vue";

const items = [
  { label: "Edit", onSelect: () => {} },
  { label: "Duplicate", onSelect: () => {} },
  { type: "separator" as const },
  { label: "Delete", destructive: true, onSelect: () => {} },
];
</script>

<template>
  <DropdownMenu :items="items">
    <Button variant="outlined">Actions ▾</Button>
  </DropdownMenu>
</template>
```

### Angular 17+

```ts
import { Component } from "@angular/core";
import { DropdownMenu, Button } from "@sisyphos-ui/angular";
import type { DropdownMenuItem } from "@sisyphos-ui/angular";

@Component({
  selector: "app-row-actions",
  standalone: true,
  imports: [DropdownMenu, Button],
  template: `
    <sui-dropdown-menu [items]="items">
      <sui-button variant="outlined">Actions ▾</sui-button>
    </sui-dropdown-menu>
  `,
})
export class RowActionsComponent {
  items: DropdownMenuItem[] = [
    { label: "Edit", onSelect: () => {} },
    { label: "Duplicate", onSelect: () => {} },
    { type: "separator" },
    { label: "Delete", destructive: true, onSelect: () => {} },
  ];
}
```

## Examples

### Default

Declarative menu items — supports separators, labels, shortcuts, destructive items.

```tsx
import { Button, DropdownMenu } from "@sisyphos-ui/react";

export function Example() {
  return (
    <DropdownMenu
      items={[
        { type: "label", label: "Account" },
        { label: "Profile",  onSelect: () => console.log("profile") },
        { label: "Billing",  onSelect: () => console.log("billing") },
        { label: "Settings", shortcut: "⌘,", onSelect: () => console.log("settings") },
        { type: "separator" },
        { type: "label", label: "Team" },
        { label: "Invite members", onSelect: () => console.log("invite") },
        { label: "Manage roles",   onSelect: () => console.log("roles") },
        { type: "separator" },
        { label: "Sign out", destructive: true, onSelect: () => console.log("sign-out") },
      ]}
    >
      <Button variant="outlined">Open menu</Button>
    </DropdownMenu>
  );
}
```

### Placement

Anchor the menu to any corner of the trigger.

```tsx
import { Button, DropdownMenu } from "@sisyphos-ui/react";

export function Example() {
  return (
    <>
      {(["bottom-start", "bottom-end", "top-start", "top-end"] as const).map((p) => (
        <DropdownMenu
          key={p}
          placement={p}
          items={[
            { label: "Open", onSelect: () => {} },
            { label: "Duplicate", onSelect: () => {} },
            { type: "separator" },
            { label: "Delete", destructive: true, onSelect: () => {} },
          ]}
        >
          <Button variant="outlined" size="sm">{p}</Button>
        </DropdownMenu>
      ))}
    </>
  );
}
```

### Disabled items

Greyed-out items stay visible for discoverability but skip in keyboard navigation.

```tsx
import { Button, DropdownMenu } from "@sisyphos-ui/react";

export function Example() {
  return (
    <DropdownMenu
      items={[
        { label: "Save", shortcut: "⌘S", onSelect: () => {} },
        { label: "Save as…", shortcut: "⇧⌘S", onSelect: () => {} },
        { type: "separator" },
        { label: "Export PDF", disabled: true, onSelect: () => {} },
        { label: "Export CSV", disabled: true, onSelect: () => {} },
        { type: "separator" },
        { label: "Print", shortcut: "⌘P", onSelect: () => {} },
      ]}
    >
      <Button variant="outlined">File</Button>
    </DropdownMenu>
  );
}
```

<!-- exports: { "DropdownMenu": "@sisyphos-ui/react" } -->