O componente Menu permite agrupar um conjunto de ações ou navegações em uma lista suspensa, ocasionalmente ativado a partir de um botão ou ícone. É fundamental para apresentar opções de maneira organizada, evitando o ruído visual e mantendo a interface limpa. Favorece a acessibilidade a funções secundárias sem comprometer a hierarquia visual do conteúdo principal.

Default

Fixed menu

Drawer menu

import React from "react";
import { Menu } from "@nimbus-ds/patterns";
import { Badge, Box, Icon, IconButton, Tag, Text } from "@nimbus-ds/components";
import {
  TiendanubeIcon,
  ExternalLinkIcon,
  HomeIcon,
  StatsIcon,
  CashIcon,
  TagIcon,
  UserIcon,
  DiscountCircleIcon,
  ToolsIcon,
  AppsIcon,
  EcosystemIcon,
  CogIcon,
} from "@nimbus-ds/icons";

const Example: React.FC = () => (
  <Menu>
    <Menu.Header>
      <Box display="flex" gap="2" alignItems="center" width="100%">
        <Icon
          color="neutral-textHigh"
          source={<TiendanubeIcon size="medium" />}
        />
        <Box display="inline-flex" flex="1">
          <Text fontSize="base" color="neutral-textHigh" fontWeight="bold">
            Tienda demo
          </Text>
        </Box>
        <IconButton source={<ExternalLinkIcon />} size="2rem" />
      </Box>
    </Menu.Header>
    <Menu.Body>
      <Menu.Section>
        <Menu.Button startIcon={HomeIcon} label="Inicio" />
        <Menu.Button startIcon={StatsIcon} label="Estadísticas" />
      </Menu.Section>
      <Menu.Section title="Administrar">
        <Menu.ButtonAccordion
          controlled
          contentId="content-1"
          menuButton={{
            id: "control-1",
            startIcon: CashIcon,
            label: "Ventas",
            children: <Badge appearance="primary" count="1299" />,
            "aria-controls": "content-1",
          }}
        >
          <Menu.Button label="Lista de ventas" active />
          <Menu.Button label="Exportar lista" />
        </Menu.ButtonAccordion>
        <Menu.Button startIcon={TagIcon} label="Productos" />
        <Menu.Button startIcon={UserIcon} label="Clientes">
          <Tag appearance="primary">¡Nuevo!</Tag>
        </Menu.Button>
        <Menu.Button startIcon={DiscountCircleIcon} label="Marketing" />
      </Menu.Section>
      <Menu.Section title="Personalizar">
        <Menu.Button startIcon={ToolsIcon} label="Mi Tiendanube" />
      </Menu.Section>
      <Menu.Section title="Potenciar">
        <Menu.Button startIcon={AppsIcon} label="Mis aplicaciones" />
        <Menu.Button startIcon={EcosystemIcon} label="Canales de venta" />
      </Menu.Section>
    </Menu.Body>
    <Menu.Footer label="Configuración" startIcon={CogIcon} />
  </Menu>
);

export default Example;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/menu

Quando há menos de duas ações disponíveis. Mostrá-las diretamente.
Para ações principais ou críticas. Estas devem estar visíveis sem interação adicional.
Em fluxos onde cada opção requer explicação ou contexto extenso.
Em fluxos onde se requer navegar de maneira sequencial (passos) nesse caso usar Accordion ou Stepper segundo seja o caso.

Critérios de usabilidade e produtividade

Acesso rápido a funções: Reduz o número de cliques e mantém o foco no conteúdo principal.
Otimiza o uso do espaço: Apresenta ações apenas quando se requerem, evitando sobrecarregar a interface.
Agrupação lógica: As ações agrupadas reduzem a carga cognitiva e simplificam a tomada de decisões.

Boas práticas de acessibilidade

Para garantir uma experiência inclusiva:

Suporte total para navegação com teclado (Tab, Shift+Tab, setas).
Roles ARIA apropriados: menu, menuitem.
Labels claros e visíveis para leitores de tela.
Estados de foco visíveis e claros.
Áreas táteis adequadas em dispositivos móveis (mínimo 44x44px).
Não depender da cor como único indicador de estado.

Anatomia

O Menu inclui:

Activator: Botão ou ícone que dispara o menu.
Container
Logo
Menu buttons: Opções do menu com ícones opcionais.
Separadores: Para agrupar ações por contexto.
Label: Nome das categorias de acessos

Dependências

MenuButton
Icon
Tooltip
List item

Variantes

Default: Menu sem contêiner
Fixed menu: Menu fixo localizado à esquerda da interface.
Drawer menu: Menu ancorado dentro de um Side Modal. É disparado a partir de um trigger

✅ Do

Ordenar as ações de mais a menos utilizadas.
Fechar o menu ao clicar fora ou após selecionar uma opção.
Desdobrar ações secundárias ao clicar sobre ação principal

❌ Don't

Não ocultar ações importantes que deveriam ser visíveis permanentemente.
Não usar apenas ícones sem etiquetas (falha de acessibilidade).
Em menus contextuais em tooltip não sobrecarregar o menu com mais de 7 itens.
Não permitir ações destrutivas sem confirmação contextual.

Props

Propriedades adicionais são repassadas ao elemento <Menu>. Consulte a documentação do elemento div para ver a lista de atributos aceitos pelo elemento <Menu>.

Name	Type	Default	Description
children*	React.ReactNode		Content of the menu.

Menu.Section

Name	Type	Default	Description
title	string		Optional title of the section.
children*	React.ReactNode		Content of the menu section.

Menu.Header

Name	Type	Default	Description
children*	React.ReactNode		Content of the menu header.

Menu.Body

Name	Type	Default	Description
children*	React.ReactNode		Content of the menu body.

Menu.Footer

Name	Type	Description
active	boolean	Sets the state of the button as active/inactive.
label*	string	Text label for the button.
onClick	() => void;	Function executed when clicking the button.
startIcon	React.FC<IconProps>	Sets an icon element on the left of the button.

Menu

Implementação

Menu

Quando usar

Quando não usar

Critérios de usabilidade e produtividade

Boas práticas de acessibilidade

Anatomia

Dependências

Variantes

Props

Menu

Menu.Section

Menu.Header

Menu.Body

Menu.Footer