Dropdown menu

Acciones secundarias de un elemento (⋯). Flechas navegan, Esc cierra.

Menú de acciones secundarias de un elemento, sobre @base-ui/react/menu. Es el clásico botón ⋯.

Instalación

shadcn

npx shadcn@latest add https://design.moodinary.com/r/dropdown-menu.json

import

import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from "@moodinary/ui/components/dropdown-menu";

Ejemplos

El menú visible ofrece una alternativa a arrastrar el miembro a otro equipo, como en la app.

Código

team-options.tsx

import { Button } from "@moodinary/ui/components/button";
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuGroup,
	DropdownMenuItem,
	DropdownMenuLabel,
	DropdownMenuTrigger,
} from "@moodinary/ui/components/dropdown-menu";
import { MoreHorizontalIcon } from "@moodinary/ui/components/icons";

export default function MoveMember() {
	return (
		<DropdownMenu>
			<DropdownMenuTrigger
				render={
					<Button
						aria-label="Mover a Lucía a otro equipo"
						size="icon-sm"
						variant="ghost"
					/>
				}
			>
				<MoreHorizontalIcon />
			</DropdownMenuTrigger>
			<DropdownMenuContent align="end">
				<DropdownMenuGroup>
					<DropdownMenuLabel>Mover a…</DropdownMenuLabel>
					<DropdownMenuItem>4.º A</DropdownMenuItem>
					<DropdownMenuItem>Equipo Ventas</DropdownMenuItem>
					<DropdownMenuItem>Sin equipo</DropdownMenuItem>
				</DropdownMenuGroup>
			</DropdownMenuContent>
		</DropdownMenu>
	);
}

Props

DropdownMenuContent

Prop	Tipo	Default	Descripción
side	"top" \| "right" \| "bottom" \| "left"	"bottom"	Lado del disparador.
align	"start" \| "center" \| "end"	"start"	Alineación.
sideOffset	number	4	Distancia en px.

DropdownMenuItem

Prop	Tipo	Default	Descripción
variant	"default" \| "destructive"	"default"	destructive pinta el ítem en rojo.
inset	boolean	false	Sangría para alinear con ítems con ícono.
disabled	boolean	false	Lo saltea el teclado y baja la opacidad.
onClick	() => void	-	Acción del ítem.

DropdownMenuCheckboxItem

Prop	Tipo	Default	Descripción
checked	boolean	-	Estado del check.
onCheckedChange	(checked: boolean) => void	-	Se llama al alternar.

Cuándo sí y cuándo no

Hacé

Agrupá y poné la acción destructiva al final.
Si algo está deshabilitado, decí por qué: Exportar (plan Core).
Mostrá atajos con DropdownMenuShortcut.

Evitá

No pongas más de ocho ítems.
No anides submenús salvo que no haya otra.
No uses el menú para la acción principal de la vista.

Flechas navegan, Enter elige, Esc cierra.
Las letras saltan al ítem que empieza con esa letra.
El foco vuelve al disparador al cerrar.