Menu
Oferece uma lista curta de comandos contextuais a partir de um Button.
Design
Preview funcional
Executado pelo runtime JavaScript estável ds-tis/menu.
Carregando preview funcional…
Anatomia
4
1 Item (
2 Ícone (
3 Shortcut (
4 Separator (
.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
Estados e seleção
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
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" |
Implementação
- Status
- Estável
- Distribuição
- Pacote npm
Instalação
npm install ds-tispnpm add ds-tisyarn add ds-tisbun add ds-tisImportações
import 'ds-tis/css'
import { initActionMenus } from 'ds-tis/menu'
initActionMenus()Markup
<div class="ds-action-menu">
<button class="ds-button ds-button--outline ds-action-menu__trigger" type="button" aria-haspopup="menu" aria-expanded="false" aria-controls="project-menu">
<span class="ds-button__label">Ações do projeto</span>
</button>
<div class="ds-menu ds-action-menu__content" id="project-menu" role="menu">
<button class="ds-menu__item" role="menuitem" type="button">
<span class="ds-menu__item-label">Editar detalhes</span>
</button>
</div>
</div>Contrato da implementação Web
Action Menu
Action Menu combina um Button trigger com um Menu posicionado. O módulo público ds-tis/menu (initActionMenus / destroyActionMenus) é obrigatório para o contrato interativo: abertura, Escape, setas, typeahead e retorno de foco. Eventos: ds-menu-open, ds-menu-close.
Mapeamento de tokens
| Parte | CSS | Token |
|---|---|---|
| Surface | .ds-menu | component.menu.surface.* |
| Item | .ds-menu__item | component.menu.item.{height,gap,padding-x,radius,bg,content} |
| Destructive | .ds-menu__item--destructive | component.menu.item.{content,icon,meta}.color.destructive |
| Icon | .ds-menu__icon | component.menu.item.icon.{color,size,stroke-width} |
| Overlay gap | .ds-action-menu__content | component.action-menu.overlay.gap.default |
Classes CSS
| Classe | Descrição |
|---|---|
ds-menu | Container do menu (role="menu") |
ds-menu__item | Item de comando |
ds-menu__item--destructive | Ação destrutiva |
ds-menu__separator | Separador de grupos |
ds-action-menu | Wrapper trigger + popup |
ds-action-menu__trigger | Button que abre o menu |
ds-action-menu__content | Menu posicionado no overlay |
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
Inicialize o runtime público após o render e destrua-o quando a view responsável for desmontada.
Evidência de validação
Coberta pelo Storybook estável, testes do runtime público quando aplicável, cenários de teclado, responsividade e Axe.