# DropdownMenu

> Acciones sobre la página en la que estás. Ítems, checks, radios, submenús y atajos.

```tsx
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, … } from "sebs7n-ui/dropdown-menu"
```

## Ejemplos

### Acciones de una fila

`DropdownMenuLabel` va dentro de `DropdownMenuGroup`: suelto, Base UI tira la página abajo.

```tsx
import { ArchiveIcon, CopyIcon, DownloadIcon, MoreHorizontalIcon, PencilIcon, TrashIcon } from "lucide-react"
import { Button } from "sebs7n-ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "sebs7n-ui/dropdown-menu"

function Acciones() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button aria-label="Acciones de la factura 0012" size="icon-md" variant="ghost" />}>
        <MoreHorizontalIcon />
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuGroup>
          <DropdownMenuLabel>Factura 0012</DropdownMenuLabel>
          <DropdownMenuItem>
            <PencilIcon />
            Editar
            <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>
          </DropdownMenuItem>
          <DropdownMenuItem>
            <CopyIcon />
            Duplicar
          </DropdownMenuItem>
          <DropdownMenuSub>
            <DropdownMenuSubTrigger>
              <DownloadIcon />
              Descargar
            </DropdownMenuSubTrigger>
            <DropdownMenuSubContent>
              <DropdownMenuItem>PDF</DropdownMenuItem>
              <DropdownMenuItem>XML</DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuSub>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuItem>
            <ArchiveIcon />
            Archivar
          </DropdownMenuItem>
          <DropdownMenuItem variant="destructive">
            <TrashIcon />
            Eliminar
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

### Checks y radios

Ninguno de los dos cierra el menú: se recorren con las flechas.

```tsx
import { Button } from "sebs7n-ui/button"
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from "sebs7n-ui/dropdown-menu"
import { useState } from "react"

function ChecksYRadios() {
  const [orden, setOrden] = useState("fecha")
  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>Vista</DropdownMenuTrigger>
      <DropdownMenuContent className="w-56">
        <DropdownMenuGroup>
          <DropdownMenuLabel>Columnas</DropdownMenuLabel>
          <DropdownMenuCheckboxItem defaultChecked>Cliente</DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem defaultChecked>Importe</DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem>CUIT</DropdownMenuCheckboxItem>
        </DropdownMenuGroup>
        <DropdownMenuSeparator />
        <DropdownMenuGroup>
          <DropdownMenuLabel>Ordenar por</DropdownMenuLabel>
          <DropdownMenuRadioGroup onValueChange={setOrden} value={orden}>
            <DropdownMenuRadioItem value="fecha">Fecha</DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="importe">Importe</DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="cliente">Cliente</DropdownMenuRadioItem>
          </DropdownMenuRadioGroup>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

## Props

### DropdownMenu

Hereda las props de `Menu.Root`.

Sin props propias: pasa todo al primitivo.

### DropdownMenuCheckboxItem

Hereda las props de `Menu.CheckboxItem`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### DropdownMenuContent

Hereda las props de `Menu.Popup` y `Menu.Positioner`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `align` | `"center" \| "start" \| "end"` | `"start"` | How to align the popup relative to the specified side. Submenus and menubars default to `'start'`. |
| `alignOffset` | `number \| OffsetFunction` | `0` | Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. |
| `side` | `"top" \| "bottom" \| "left" \| "right" \| "inline-end" \| "inline-start"` | `"bottom"` | Which side of the anchor element to align the popup against. May automatically change to avoid collisions. Submenus and vertical menubars default to `'inline-end'`. |
| `sideOffset` | `number \| OffsetFunction` | `6` | Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. |
| `className` | `string` | — | — |

### DropdownMenuGroup

Hereda las props de `Menu.Group`.

Sin props propias: pasa todo al primitivo.

### DropdownMenuItem

Hereda las props de `Menu.Item`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `inset` | `boolean` | — | — |
| `variant` | `"default" \| "destructive"` | `"default"` | `destructive` pinta el ítem en rojo y va último, después de un separador. |
| `className` | `string` | — | — |

### DropdownMenuLabel

Hereda las props de `Menu.GroupLabel`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `inset` | `boolean` | — | — |
| `className` | `string` | — | — |

### DropdownMenuRadioGroup

Hereda las props de `Menu.RadioGroup`.

Sin props propias: pasa todo al primitivo.

### DropdownMenuRadioItem

Hereda las props de `Menu.RadioItem`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### DropdownMenuSeparator

Hereda las props de `Menu.Separator`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### DropdownMenuShortcut

Hereda las props de `<span>`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### DropdownMenuSub

Hereda las props de `Menu.SubmenuRoot`.

Sin props propias: pasa todo al primitivo.

### DropdownMenuSubContent

Hereda las props de `Menu.Popup` y `Menu.Positioner`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `align` | `"center" \| "start" \| "end"` | `"start"` | How to align the popup relative to the specified side. Submenus and menubars default to `'start'`. |
| `alignOffset` | `number \| OffsetFunction` | `-4` | Additional offset along the alignment axis in pixels. Also accepts a function that returns the offset to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. |
| `side` | `"top" \| "bottom" \| "left" \| "right" \| "inline-end" \| "inline-start"` | `"right"` | Which side of the anchor element to align the popup against. May automatically change to avoid collisions. Submenus and vertical menubars default to `'inline-end'`. |
| `sideOffset` | `number \| OffsetFunction` | `2` | Distance between the anchor and the popup in pixels. Also accepts a function that returns the distance to read the dimensions of the anchor and positioner elements, along with its side and alignment. The function takes a `data` object parameter with the following properties: - `data.anchor`: the dimensions of the anchor element with properties `width` and `height`. - `data.positioner`: the dimensions of the positioner element with properties `width` and `height`. - `data.side`: which side of the anchor element the positioner is aligned against. - `data.align`: how the positioner is aligned relative to the specified side. |
| `className` | `string` | — | — |

### DropdownMenuSubTrigger

Hereda las props de `Menu.SubmenuTrigger`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `inset` | `boolean` | — | — |
| `className` | `string` | — | — |

### DropdownMenuTrigger

Hereda las props de `Menu.Trigger`.

Sin props propias: pasa todo al primitivo.

## Teclado

| Tecla | Qué hace |
|---|---|
| Enter · Espacio · ↓ | Abre. |
| ↑ ↓ | Recorre los ítems. |
| → ← | Entra y sale de un submenú. |
| Escribir | Salta al ítem que empieza con esas letras. |
| Enter | Ejecuta y cierra. |
| Escape | Cierra y devuelve el foco al trigger. |

## Accesibilidad

- Emite `role="menu"` / `role="menuitem"`, atrapa el foco y se recorre con flechas: el lector anuncia «menú, N elementos».
- Los `CheckboxItem` y `RadioItem` emiten `menuitemcheckbox` / `menuitemradio` y no cierran el menú.
- `DropdownMenuShortcut` es decorativo: el atajo real lo registra la app.

## Reglas de uso

- **`NavigationMenu` si los ítems navegan, `DropdownMenu` si ejecutan algo.** No es cosmético: el modo de navegación por links de un lector no ve los `menuitem`.
- **`DropdownMenuLabel` va dentro de `DropdownMenuGroup`.** Suelto, Base UI tira la página abajo.
- El trigger usa `render={<Button … />}`.
- `variant="destructive"` para el ítem que borra, y siempre al final, separado.
- Más de ~10 ítems: paleta de comandos o `Combobox`, no un menú.

## Relacionados

[navigation-menu](/docs/components/navigation-menu.md) · [user-menu](/docs/components/user-menu.md) · [select](/docs/components/select.md) · [popover](/docs/components/popover.md)