Menu

1.5.6

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.

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;

Instale o componente via terminal.

npm install @nimbus-ds/menu

Menu

Utilizar Menu quando for necessário:

  • Mostrar ações relacionadas com uma função (ex. configuração, canais de venda).
  • Agrupar acessos secundários que não requerem protagonismo constante.
  • Guiar o usuário sobre o mapa de navegação do sistema ou um fluxo de configuração.

Evitar usar o Menu nestes casos:

  • 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.
  • 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.

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.

O Menu inclui:

  1. Activator: Botão ou ícone que dispara o menu.
  2. Container
  3. Logo
  4. Menu buttons: Opções do menu com ícones opcionais.
  5. Separadores: Para agrupar ações por contexto.
  6. Label: Nome das categorias de acessos
  • MenuButton
  • Icon
  • Tooltip
  • List item
  • 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.

Additional props are passed to the <Menu> element. See div docs for a list of props accepted by the <Menu> element.

Menu

NameTypeDefaultDescription

children*

React.ReactNode

Content of the menu.

Menu.Section

NameTypeDefaultDescription

title

string

Optional title of the section.

children*

React.ReactNode

Content of the menu section.

Menu.Header

NameTypeDefaultDescription

children*

React.ReactNode

Content of the menu header.

Menu.Body

NameTypeDefaultDescription

children*

React.ReactNode

Content of the menu body.

Menu.Footer

NameTypeDefaultDescription

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.