Menu

Componentes/Navegação

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

Recipe React distribuída como source, com comportamento Base UI e classes/tokens públicos do Menu TIS.

DesignUsoImplementaçãoAcessibilidade

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

Design

Preview funcional

Executado pela recipe React distribuída via shadcn e baseada em Base UI.

Carregando preview funcional…

Abrir playground React · shadcn/Base UI

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

Composição React

import {
  Menu,
  MenuContent,
  MenuItem,
  MenuItemText,
  MenuPortal,
  MenuPositioner,
  MenuTrigger,
  MenuTriggerIndicator,
} from "@/components/ui/menu"

<Menu>
  <MenuTrigger>
    <span className="ds-button__label">Ações</span>
    <MenuTriggerIndicator />
  </MenuTrigger>
  <MenuPortal>
    <MenuPositioner>
      <MenuContent aria-label="Ações do projeto">
        <MenuItem><MenuItemText>Editar detalhes</MenuItemText></MenuItem>
      </MenuContent>
    </MenuPositioner>
  </MenuPortal>
</Menu>

Implementação

Status

Beta

Distribuição

Source via shadcn

Instalação

Configure o namespace uma única vez na integração React.

npm

npx shadcn@latest add @tis/menu

pnpm

pnpm dlx shadcn@latest add @tis/menu

yarn

yarn dlx shadcn@latest add @tis/menu

bun

bunx --bun shadcn@latest add @tis/menu

Contrato público

Item do registry

@tis/menu

Provider

Base UI

Distribuição

Source copiado para a aplicação

Status

Beta

Arquitetura técnica

Abrir JSON do registry

Inspecionar source distribuído

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 da Base UI e teste conteúdo real, foco visível e nomes acessíveis na aplicação consumidora.

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