Dropdown

Menú de acciones que se abre desde un botón.

Cuándo usarlo

Props. label o trigger, items [{icon, label, shortcut, danger, onSelect} o {divider: true}], header (p. ej. un AvatarLabel), open / defaultOpen. Panel bg-primary_alt, radius-lg, shadow-lg, mínimo 240px; ítems de 16px de icono con radius-md.

Regla. La acción destructiva va al final, tras un separador, con danger.

Teclado. Enter, espacio o ↓ abren el menú en el primer ítem y ↑ en el último; las flechas recorren, escribir salta al ítem que empieza así, Enter elige y Escape cierra. Al cerrar, el foco vuelve al botón. Con ratón, el foco entra en el menú y cada ítem se marca al pasar por encima.

Abierto de inicio. Con defaultOpen el panel se pinta en línea bajo el botón (como en esta página), sin llevarse el foco ni bloquear la página; elegir un ítem o pulsar el botón lo cierra. Abierto por el usuario, el panel flota sobre la página: se da la vuelta si no cabe debajo y se cierra al pulsar fuera.

Ampliaciones sobre la guía. onOpenChange(open) avisa al abrir y cerrar (sin él, open controlado no se podría cambiar) y textValue en un ítem da el texto para buscar con el teclado cuando label no es texto. Un trigger propio tiene que pasar ref y props al DOM, como hace Button.

Detalles. Los atajos solo se muestran: el componente no los registra.

Ejemplos

ADAdministradoradmin@jotis.me

Props

Prop	Tipo	Por defecto	Descripción
`label`	`ReactNode`	`"Opciones"`	Texto del botón que abre el menú.
`trigger`	`ReactNode`	—	Disparador propio en lugar del botón: un elemento que pase `ref` y props al DOM, como un `Button` solo icono.
`header`	`ReactNode`	—	Cabecera del panel, por ejemplo un `AvatarLabel`.
`open`	`boolean`	—	Abierto (controlado).
`defaultOpen`	`boolean`	`false`	Abierto al principio (no controlado). Así abierto no se lleva el foco ni bloquea la página.
`onOpenChange`	`((open: boolean) => void)`	—	Avisa al abrir y cerrar (ampliación sobre la guía, para el modo controlado).
`items`obligatoria	`DropdownItem[]`	—
`aria-label`	`string`	—	Nombre del menú para lectores de pantalla. Por defecto, el texto del botón.
`className`	`string`	—

Código

import { Dropdown } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<Dropdown
				label="Acciones"
				items={[
					{ icon: "copy-01", label: "Duplicar", onSelect: duplicar },
					{ divider: true },
					{ icon: "trash-01", label: "Eliminar", danger: true, onSelect: eliminar },
				]}
			/>
		</>
	);
}

---
import { Dropdown } from "@jotis-me/react";
---

<Dropdown client:load
	label="Acciones"
	items={[
		{ icon: "copy-01", label: "Duplicar", onSelect: duplicar },
		{ divider: true },
		{ icon: "trash-01", label: "Eliminar", danger: true, onSelect: eliminar },
	]}
/>

Los onSelect de los ítems son funciones y no cruzan de Astro a una isla: envuélvelo en un .tsx y úsalo con client:load.