Menu

Componentes/Navegação

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

Diretivas standalone sobre Angular Aria com foco roving, typeahead, comandos e escolhas radio/checkbox.

DesignUsoImplementaçãoAcessibilidade

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

Design

Preview funcional

Executado pelo componente Angular nativo com @angular/aria/menu.

Carregando preview funcional…

Abrir playground Angular

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 esta saída Angular nativa quando a aplicação já usa Angular. Ela consome o mesmo CSS do DS e não depende do runtime Web nem dos adapters React.

Implementação

Status

Beta

Distribuição

Tarball Angular validado

Instalação

npm

npm install ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

pnpm

pnpm add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

yarn

yarn add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

bun

bun add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

Beta de workspace validada

O comando instala o tarball local gerado e validado no consumer. @tis/angular ainda não está publicado no registry público do npm.

Estilos do DS

@import "ds-tis/css";

Importações Angular

import {
  TisActionMenu,
  TisMenu,
  TisMenuItem,
  TisMenuItemLabel,
  TisMenuTrigger,
} from '@tis/angular/menu'

Template

<div tisActionMenu align="start">
  <button tisMenuTrigger [menu]="menu.primitive">
    <span class="ds-button__label">Ações do projeto</span>
  </button>
  <div tisMenu #menu="tisMenu" aria-label="Ações do projeto">
    <button tisMenuItem value="edit" searchTerm="Editar">
      <span tisMenuItemLabel>Editar detalhes</span>
    </button>
  </div>
</div>

Contrato público

Pacote

@tis/angular

Entrypoint

@tis/angular/menu

Primitive

@angular/aria/menu

Status

Beta

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 nativa do button, submit, nomes acessíveis, estado disabled e foco visível.

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