Dropdown Menu
StableMenu de ações ancorado a um gatilho, com grupos, rótulos, submenus, itens de checkbox e de rádio. Composto sobre Base UI Menu. A diferença para o Popover não é visual: um menu tem papel `menu`, foco itinerante pelas setas e typeahead, e dentro dele Tab sai em vez de andar entre campos — por isso uma lista de ações mora aqui e um formulário não.
Instalação
npx up-web-ds add dropdown-menuGera check, chevron-right para a biblioteca de ícones do projeto (components.json → iconLibrary).
Preview
Default
With Groups
With State
With Submenu
States
All states
Default
With Groups
With State
With Submenu
States
Metadata
Classificação
- Layer
- Primitive
- Domínio
- Domain-free (compartilhado)
- Categoria
- overlay
- Status
- Stable
Origem e distribuição
- Fonte
- shadcn registry / dropdown-menu
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: revisado
- Reduced motion: revisado
Teclado verificado por teste: ArrowDown abre já com o primeiro item destacado, as setas percorrem os itens pulando os rótulos, Home e End vão às pontas, digitar as primeiras letras encontra um item, ArrowRight abre o submenu e ArrowLeft volta ao item que o abriu, e Escape fecha devolvendo o foco ao gatilho. Leitor de tela verificado por teste: o gatilho declara aria-haspopup="menu" e aria-expanded acompanha o estado, o popup tem papel menu, itens de checkbox e de rádio reportam aria-checked em vez de depender do ícone, e um item desabilitado continua anunciado por aria-disabled recusando a execução sem fechar o menu. Touch verificado em navegador com emulação de toque em viewport de 375px: gatilho e itens medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8 e a escolha por toque funciona. Reduced motion verificado com prefers-reduced-motion: reduce — os tokens de motion colapsam para 1ms e a animação de entrada mede 0.001s.
Dependências
- Pacotes
- @base-ui/react
- Ícones
- check, chevron-right
- Construído sobre
- Nenhum
- Usado por
- Menubar