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/menuMenu
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.
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>.
Menu
| Name | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | Content of the menu. | |
expanded | boolean | Whether the menu should render in expanded mode. If `undefined`, it follows `MenuExpandContext` value. If provided, it overrides the context. |
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. | |
expanded | boolean | Controlled override for menu expansion state. This prop does not manage internal state and is not forwarded to the DOM as an attribute. It is used only for layout and visual state determination. If not provided, the expanded state will be determined by the context. | |
onClick | () => void; | Function executed when clicking the button. | |
startIcon | React.FC<IconProps> | Sets an icon element on the left of the button. |