Dropdown

Menú contextual accesible con items, separadores, labels y atajos de teclado.

pnpm dlx nuvo-ui add dropdown

Básico

Posición izquierda

Uso

import {
  DropdownMenu, DropdownTrigger, DropdownContent,
  DropdownItem, DropdownSeparator, DropdownLabel
} from "@nuvo-ui/ui"

<DropdownMenu>
  <DropdownTrigger>
    <Button>Acciones</Button>
  </DropdownTrigger>
  <DropdownContent align="start">
    <DropdownLabel>Sección</DropdownLabel>
    <DropdownItem icon={<EditIcon />} shortcut="⌘E" onClick={edit}>
      Editar
    </DropdownItem>
    <DropdownSeparator />
    <DropdownItem destructive onClick={remove}>Eliminar</DropdownItem>
  </DropdownContent>
</DropdownMenu>

Props — DropdownContent

Prop	Tipo	Default	Descripción
align	"start" \| "center" \| "end"	"start"	Alineación respecto al trigger
side	"top" \| "right" \| "bottom" \| "left"	"bottom"	Lado donde se abre el menú
sideOffset	number	4	Desplazamiento desde el trigger

Props — DropdownItem

Prop	Tipo	Default	Descripción
icon	ReactNode	—	Ícono a la izquierda
shortcut	string	—	Atajo de teclado mostrado a la derecha
destructive	boolean	false	Estilo rojo para acciones peligrosas
disabled	boolean	false	Deshabilita el item
onClick	() => void	—	Acción al seleccionar