Dropdown Menu

Menu de ações a partir de um botão.

Sobreposições e menus

Carregando demonstração…

Código da demo

"use client";

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

export function Demo() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Abrir menu</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="start">
        <DropdownMenuLabel>Minha conta</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Perfil</DropdownMenuItem>
        <DropdownMenuItem>Faturamento</DropdownMenuItem>
        <DropdownMenuItem>Sair</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

Use

Lista de ações de um objeto, com verbos curtos.
Ação destrutiva por último, separada e em destructive.

Não use

Não use para escolher um valor de formulário: use Select.
Não esconda a ação mais comum aqui: deixe um Button.

Acessibilidade: Teclado setas; Esc fecha; itens com labels claros.
Importar: import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from "@financeequity/ui/dropdown-menu"
Neste repositório:
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent } from "@/components/ui/dropdown-menu"
Dependências: radix-ui