Dropdown Menu

Menú desplegable que se abre desde un disparador con lista de opciones

Componente de menú desplegable construido con Ark UI. Usa la API de conveniencia con trigger e items para menús simples, o la API compuesta para layout personalizado, grupos y separadores.

import { DropdownMenu } from "@/components/ui/dropdown-menu";

const items = [
  { value: "profile", label: "Perfil" },
  { value: "settings", label: "Ajustes" },
  { value: "logout", label: "Cerrar sesión" },
];

export default function Example() {
  return <DropdownMenu trigger="Opciones" items={items} />;
}

View Code

Instalación

bash

liminal add dropdown-menu

Uso

Pasa trigger (contenido o elemento del botón) e items (array de { value, label, disabled? }). Usa onSelect para manejar la selección.

<DropdownMenu
  trigger="Opciones"
  items={[
    { value: "a", label: "Opción A" },
    { value: "b", label: "Opción B" },
  ]}
  onSelect={({ value }) => console.log(value)}
/>

View Code

Ejemplos

API de conveniencia

import { DropdownMenu } from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

<DropdownMenu
  trigger={<Button variant="outline">Abrir menú</Button>}
  items={[
    { value: "edit", label: "Editar" },
    { value: "duplicate", label: "Duplicar" },
    { value: "delete", label: "Eliminar", disabled: true },
  ]}
/>

View Code

API compuesta

Usa MenuRoot, MenuTrigger, MenuContent, MenuItem, MenuItemText y opcionalmente MenuItemGroup, MenuItemGroupLabel y MenuSeparator para control total.

tsx

import {
  MenuRoot,
  MenuTrigger,
  MenuContent,
  MenuItemGroup,
  MenuItem,
  MenuItemText,
  MenuSeparator,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";

export default function Example() {
  return (
    <MenuRoot>
      <MenuTrigger asChild>
        <Button variant="outline">Acciones</Button>
      </MenuTrigger>
      <MenuContent>
        <MenuItemGroup>
          <MenuItem value="new">Nuevo archivo</MenuItem>
          <MenuItem value="open">Abrir</MenuItem>
        </MenuItemGroup>
        <MenuSeparator />
        <MenuItemGroup>
          <MenuItem value="logout">Cerrar sesión</MenuItem>
        </MenuItemGroup>
      </MenuContent>
    </MenuRoot>
  );
}

API

Prop	Type	Default	Description
trigger	React.ReactNode	-	Contenido o elemento que abre el menú (API de conveniencia).
items	{ value: string; label: React.ReactNode; disabled?: boolean }[]	-	Opciones del menú (API de conveniencia).
onSelect	(details: { value: string }) => void	-	Callback al seleccionar un ítem.
open	boolean	uncontrolled	Estado abierto controlado (MenuRoot).
onOpenChange	(details) => void	-	Callback cuando cambia el estado abierto (MenuRoot).