Menu
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:
- 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
- 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
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 | Default | 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. |