Menu

Uso

O Menu deve ser usado quando for necessário exibir uma lista de ações ou opções contextuais relacionadas a um elemento clicado, como botões de overflow, filter chips ou outros componentes interativos. Ele é ideal para agrupar ações secundárias ou filtragens que não precisam estar visíveis o tempo todo, oferecendo acesso rápido sem ocupar espaço fixo na interface.

Anatomia

❖. Container

• Responsável por agrupar todos os elementos do Menu.

• Envolve os itens internos e define o comportamento visual flutuante do componente.

• Deve respeitar o framing do componente de origem para manter consistência visual.

1. Search bar

• Campo de busca opcional inserido dentro do Menu.

• Recebe texto como input do usuário para filtrar os itens listados.

• Deve ser utilizado apenas quando o menu contiver muitos itens que justifiquem uma busca direta.

• Pode ser exibido no topo do menu, respeitando padding e alinhamento.

• Suas regras de interação são definidas no componente “Search bar”.

2. Agrupamento de lista

• Contém os itens de seleção exibidos no menu.

• Utiliza o componente de Compact List, com regras definidas separadamente.

• É obrigatório que o menu tenha pelo menos dois ou três itens para ser considerado útil.

• Cada item pode ter ação associada (tap/click) e estados visuais como hover ou selected (definidos no Compact List).

3. Scrollbar

• Visível automaticamente quando a altura do menu ultrapassa o limite do container pai.

• Facilita a navegação entre muitos itens, indicando que há mais conteúdo oculto.

• Comportamento padrão nativo, podendo ser personalizado com o Design System.

4. Fade

• Aparece na parte inferior (ou superior, dependendo do scroll) para reforçar visualmente a existência de conteúdo adicional.

• Funciona como um gradiente sutil, sugerindo continuidade.

• Deve desaparecer assim que o scroll atingir o fim da lista, evitando confusão visual.

Variantes

Small

Menu com largura pequena, alinhada ao componente de origem que o aciona (como um botão ou chip pequeno). Deve ser usado quando o elemento de origem tem baixa ênfase visual e espaço reduzido. Ideal para contextos compactos.

Medium

Menu de largura média, também alinhado ao tamanho do componente de origem. É a variação padrão, balanceando visibilidade e economia de espaço. Adequado para a maioria dos casos de uso com botões e chips de tamanho médio.

Large

Menu com largura maior, acompanhando componentes de origem mais amplos ou contextos em que a leitura do conteúdo exige mais espaço horizontal. Útil quando os itens têm nomes mais longos ou exigem mais contexto.

Use cases

Referências

Histórico de Atualizações