Dropdown Menu

Overlay

Menu dropdown flutuante que exibe uma lista de ações ou opções quando acionado.

Preview

Visualização do componente Dropdown Menu com diferentes configurações

Instalação

Via CLI (Recomendado)

1. Inicializar (primeira vez)

npx @scmposs/hollow-ui init
npx @scmposs/hollow-ui setup

2. Adicionar componente

npx @scmposs/hollow-ui add dropdown-menu

Os comandos init e setup fazem o pré-setup (necessário apenas uma vez). Se você rodar add sem isso, a CLI executa o setup automaticamente.

Via NPM

Instalar pacote completo

npm install @scmposs/hollow-ui@latest

Instala todos os componentes como dependência do projeto.

Uso Básico

Exemplo básico

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@scmposs/hollow-ui"

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuLabel>Ações</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Opção 1</DropdownMenuItem>
    <DropdownMenuItem>Opção 2</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

Propriedades

DropdownMenuItem

Prop	Tipo	Padrão	Descrição
variant	"default" \| "destructive"	"default"	Estilo visual do item
inset	boolean	false	Adiciona padding à esquerda
disabled	boolean	false	Desabilita o item
onSelect	function	-	Callback ao selecionar

DropdownMenuContent

Prop	Tipo	Padrão	Descrição
sideOffset	number	4	Distância do trigger em pixels
align	"start" \| "center" \| "end"	"center"	Alinhamento horizontal
side	"top" \| "right" \| "bottom" \| "left"	"bottom"	Lado preferencial do trigger

Exemplos

Com Checkbox Items

Código

const [showStatusBar, setShowStatusBar] = useState(true)

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Ver Opções</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuLabel>Aparência</DropdownMenuLabel>
    <DropdownMenuSeparator />
    <DropdownMenuCheckboxItem
      checked={showStatusBar}
      onCheckedChange={setShowStatusBar}
    >
      Barra de Status
    </DropdownMenuCheckboxItem>
  </DropdownMenuContent>
</DropdownMenu>

Com Radio Group

Código

const [position, setPosition] = useState("bottom")

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline">Posição: {position}</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent className="w-56">
    <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
      <DropdownMenuRadioItem value="top">Topo</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="bottom">Rodapé</DropdownMenuRadioItem>
    </DropdownMenuRadioGroup>
  </DropdownMenuContent>
</DropdownMenu>

Com Submenus

Com Atalhos de Teclado

Acessibilidade

O componente Dropdown Menu segue as diretrizes WAI-ARIA e implementa:

Navegação por teclado (Tab, Arrow Keys, Enter, Escape)
Suporte a type-ahead para busca rápida
Atributos ARIA apropriados para leitores de tela
Fechamento automático ao clicar fora ou pressionar Escape
Foco gerenciado automaticamente
Suporte para items desabilitados