DropdownMenu

Menú contextual desplegable con soporte para submenús, checkbox, radio y atajos.

---

Import

import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuGroup,
  DropdownMenuShortcut,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSub,
  DropdownMenuSubTrigger,
  DropdownMenuSubContent,
} from '@imansi/ui';

---

Uso básico

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Abrir menú</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Mi cuenta</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Perfil</DropdownMenuItem>
    <DropdownMenuItem>Configuración</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem variant="destructive">Cerrar sesión</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

---

Con atajos de teclado

<DropdownMenuContent className="w-56">
  <DropdownMenuItem>
    Guardar
    <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
  </DropdownMenuItem>
  <DropdownMenuItem>
    Nuevo
    <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
  </DropdownMenuItem>
</DropdownMenuContent>

---

Con checkboxes

const [mostrar, setMostrar] = useState({ barra: true, status: false });

<DropdownMenuContent>
  <DropdownMenuCheckboxItem
    checked={mostrar.barra}
    onCheckedChange={(v) => setMostrar({ ...mostrar, barra: v })}
  >
    Barra lateral
  </DropdownMenuCheckboxItem>
  <DropdownMenuCheckboxItem
    checked={mostrar.status}
    onCheckedChange={(v) => setMostrar({ ...mostrar, status: v })}
  >
    Barra de estado
  </DropdownMenuCheckboxItem>
</DropdownMenuContent>

---

Con radios

const [tema, setTema] = useState('claro');

<DropdownMenuContent>
  <DropdownMenuRadioGroup value={tema} onValueChange={setTema}>
    <DropdownMenuRadioItem value="claro">Claro</DropdownMenuRadioItem>
    <DropdownMenuRadioItem value="oscuro">Oscuro</DropdownMenuRadioItem>
    <DropdownMenuRadioItem value="sistema">Sistema</DropdownMenuRadioItem>
  </DropdownMenuRadioGroup>
</DropdownMenuContent>

---

Con submenú

<DropdownMenuContent>
  <DropdownMenuSub>
    <DropdownMenuSubTrigger>Compartir</DropdownMenuSubTrigger>
    <DropdownMenuSubContent>
      <DropdownMenuItem>Email</DropdownMenuItem>
      <DropdownMenuItem>WhatsApp</DropdownMenuItem>
      <DropdownMenuItem>Copiar link</DropdownMenuItem>
    </DropdownMenuSubContent>
  </DropdownMenuSub>
</DropdownMenuContent>

---

Props

DropdownMenuContent

Prop	Tipo	Default	Descripción
align	'start' | 'center' | 'end'	'center'	Alineación horizontal
side	'top' | 'right' | 'bottom' | 'left'	'bottom'	Lado de apertura
sideOffset	number	4	Separación
className	string	—	Clases adicionales

DropdownMenuItem

Prop	Tipo	Default	Descripción
disabled	boolean	false	Deshabilita el item
inset	boolean	false	Indenta el item
variant	'default' | 'destructive'	'default'	Estilo visual

---

Accesibilidad

• Click en el trigger abre
• Flechas ↑↓ navegan los items
• Enter activa el item
• Escape cierra
• Flecha → abre submenús
• role="menu" + role="menuitem"
• Typeahead: escribir busca el primer item que empiece con esa letra