Dropdown

Menú anclado a un disparador: selección, acciones o cuenta. Portal a body, cierre con ESC o clic fuera.

Preview principal

DROPDOWNportal · ESC · fuera

Selección

Lista con check para elegir un valor.

Alineación

align: left (default) o right.

Cuenta

Cabecera + lista + acciones (incl. danger).

Uso

import { useState } from "react";
import { Button, Dropdown, DropdownItem, DropdownLabel, Icon } from "devsoftec-ui";

function Ejemplo() {
  const [open, setOpen] = useState(false);

  return (
    <Dropdown
      open={open}
      onOpenChange={setOpen}
      trigger={
        <Button size="sm" variant="secondary">
          Opciones
          <Icon name="chevron-down" size={14} />
        </Button>
      }
    >
      <DropdownLabel>Acciones</DropdownLabel>
      <DropdownItem onClick={() => setOpen(false)}>Editar</DropdownItem>
      <DropdownItem danger onClick={() => setOpen(false)}>Eliminar</DropdownItem>
    </Dropdown>
  );
}

El trigger recibe el toggle automáticamente (aria-expanded / aria-haspopup).

Props

Prop	Tipo	Default	Descripción
`trigger`	`ReactNode`	—	Disparador (suele ser `Button`)
`open`	`boolean`	—	Visibilidad
`onOpenChange`	`(open: boolean) => void`	—	Cambio de estado
`align`	`left` \| `right`	`left`	Alineación horizontal
`width`	`number`	—	Ancho fijo (px)
`children`	`ReactNode`	—	Ítems del menú

DropdownItem

Prop	Tipo	Descripción
`children`	`ReactNode`	Etiqueta
`icon`	`ReactNode`	Ícono a la izquierda
`checked`	`boolean`	Check a la derecha
`danger`	`boolean`	Estilo destructivo
`onClick`	`() => void`	Acción

DropdownLabel · DropdownDivider

Encabezado de sección y separador.

Comportamiento

Portal a document.body (position: fixed) — no queda bajo menús/TOC
Si no hay espacio abajo, abre hacia arriba
Cierra con ESC, clic fuera o al elegir un ítem
role="menu" / menuitem