DropdownMenu

Menú contextual accesible: items con atajos, separadores, tono destructivo, y estado embebido con checkboxes y grupos de radio.

Instalación#

bash

pnpm add @tsukira/ui

Uso#

tsx

import {  DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuContent,  DropdownMenuItem, DropdownMenuSeparator,} from "@tsukira/ui"; <DropdownMenuRoot>  <DropdownMenuTrigger asChild>    <Button variant="outline">Acciones</Button>  </DropdownMenuTrigger>  <DropdownMenuContent>    <DropdownMenuItem>Editar</DropdownMenuItem>    <DropdownMenuSeparator />    <DropdownMenuItem tone="danger">Eliminar</DropdownMenuItem>  </DropdownMenuContent></DropdownMenuRoot>

Ejemplos#

Acciones con atajos

items + tono danger

Checkboxes y radios

estado dentro del menú

orden: players · retirados: sí

API#

DropdownMenuRootProps

Prop	Tipo	Default	Descripción
`children`	`ReactNode`	—	—
`open`	`boolean`	—	—
`defaultOpen`	`boolean`	—	—
`onOpenChange`	`((open: boolean) => void)`	—	—

DropdownMenuRadioGroupPropsextends HTMLAttributes<HTMLDivElement>

Prop	Tipo	Default	Descripción
`value`	`string`	—	—
`onValueChange`	`((value: string) => void)`	—	—

DropdownMenuItemPropsextends MenuItemBaseProps

Prop	Tipo	Default	Descripción
`tone`	`'default' \| 'danger'`	—	Tono visual del item — `danger` se usa para acciones destructivas.
`inset`	`boolean`	—	Indica si el item es no interactivo (visual de carga, header, etc.).