Menu

Componentes/Navegação

ImplementaçãoHTML/CSS/JSArk/ZagReact · shadcn/Base UIAngular

Adapter React independente em que Ark UI fornece as parts e Zag mantém abertura, foco, typeahead e teclado.

DesignUsoImplementaçãoAcessibilidade

Seção da documentaçãoDesignUsoImplementaçãoAcessibilidade

Design

Preview funcional

Executado pelo adapter independente Ark UI com comportamento Zag.

Carregando preview funcional…

Abrir playground Ark/Zag

Anatomia

Rename R 2 3 Duplicate D 1

4

Delete

1 Item (.ds-menu__item) — comando acionável com label obrigatório.
2 Ícone (.ds-menu__icon) — opcional, decorativo quando o texto já nomeia a ação.
3 Shortcut (.ds-menu__shortcut) — opcional, apenas informativo.
4 Separator (.ds-menu__separator) — separa grupos de ações relacionadas.

Padrão

Rename file R Duplicate D Download

Delete file

Estados e seleção

Comfortable Compact Admin only

Delete view

Uso

Quando usar

Use Menu quando

A interface precisa apresentar comandos, atalhos ou ações de um objeto. Para um trigger completo, use o padrão Action Menu.

Não use Menu quando

O usuário está escolhendo um valor de formulário; nesse caso use Select, Radio ou Checkbox. Se houver busca ou edição de texto, use Combobox.

Boas práticas

Edit Share

Delete

Faça

Agrupe ações relacionadas com separadores; coloque ações destrutivas por último.

Brazil Chile

Não faça

Não use Menu para seleção de valor de formulário — use Select ou Combobox.

Diretrizes de conteúdo

Regra	Exemplo
Verbos de ação em sentence case	"Rename file", "Delete project"
Shortcuts apenas informativos	"R" ao lado de Rename — não substitui a ação
Destructive com linguagem clara	"Delete project" — não "Remove"

Relacionados

Button Combobox Select Tooltip

Quando escolher esta saída

Adote este adapter em projetos que escolheram Ark UI e Zag como arquitetura comportamental. Não o importe dentro da saída shadcn/Base UI.

Implementação

Status

Beta

Distribuição

Adapter de source

Source do adapter

packages/react/src/ark/menu.jsx

import {
  Menu,
  MenuContent,
  MenuItem,
  MenuTrigger,
} from '@tis/react/ark/menu'

Beta de workspace

Este caminho é um contrato de workspace, não um pacote público. Ainda não se anuncia instalação por package manager.

Acessibilidade

Interação por teclado

Tecla	Ação
Arrow Down / Arrow Up	Move foco entre itens
Home / End	Primeiro / último item
Enter / Space	Ativa o item focado
Escape	Fecha o menu e retorna foco ao trigger

Accessibility

Critério WCAG	Requisito	Status
4.1.2 Name, Role, Value (A)	role="menu", role="menuitem", aria-haspopup, aria-expanded	✓
2.1.1 Keyboard (A)	Navegação por setas, Enter/Space, Escape via initActionMenus ou implementação equivalente	✓
2.4.3 Focus Order (A)	Foco inicial no primeiro item ao abrir; retorno ao trigger ao fechar	✓

Responsabilidade da saída

Preserve a semântica Ark/Zag e valide Escape, interação externa, relações ARIA e retorno de foco.

Evidência de validação

Coberta pelo Storybook da saída independente e por verificações de browser, responsividade, teclado, Axe e bundle.

Abrir referência estável