Representar o menu de navegação principal do painel de administração: agrupar os acessos às suas diferentes seções (Início, Estatísticas, Vendas, Produtos…) em um menu lateral persistente, integrado ao App Shell e visível por padrão em todas as páginas. É o uso principal do padrão: embora o Menu possa ser reaproveitado em outras navegações, ele é documentado principalmente a partir desse enfoque.
Adaptar a navegação para o Mobile: mostrar o Menu como drawer dentro de um Sidebar, aberto a partir de um botão, em vez de ocupar espaço fixo em telas pequenas. É a resolução mobile do mesmo menu de navegação do admin.

Quando não usar

Mostrar ações pontuais sobre um elemento específico: o Menu é para navegação persistente, não uma lista de ações contextuais (editar, duplicar, excluir). Em vez disso, usar Menu Button dentro de um Popover ou Tooltip.
Navegar entre visualizações de um mesmo conteúdo: por exemplo, as abas de um mesmo registro. Em vez disso, usar Nav Tabs.
Guiar um fluxo de passos sequenciais: um wizard precisa de outro padrão. Em vez disso, usar Stepper ou Accordion, conforme o caso.
Confirmar ou alertar sobre uma ação pontual que interrompe o fluxo: o Menu não substitui um modal de decisão. Em vez disso, usar Side Modal.

Anatomia

1. Header

Administrar

2. Section

3. Button

4. Button Accordion

5. Footer

Header (opcional): cabeçalho fixo na parte superior; mostra o logo da Tiendanube. Seu conteúdo pode ser livre: definido por quem integra o Menu.
Section: agrupa acessos relacionados dentro do corpo do menu (Body), com um título opcional que identifica a categoria. Ex.: "Administrar" agrupando "Vendas", "Produtos" e "Clientes".
Button: cada acesso de navegação individual, com ícone inicial opcional, estado active para indicar a seção atual e um elemento final opcional (Badge, Tag) para reforçá-lo. Implementado com o componente Menu Button.
Button Accordion: grupo expansível dentro de uma Section, para aninhar subacessos que só importam dentro dessa categoria sem sobrecarregar o nível principal de navegação. Ex.: "Vendas" expande "Lista de vendas" e "Exportar lista".
Footer (opcional): ação fixa na parte inferior, sempre visível; reservada para um acesso de baixa frequência, mas necessário em todo momento.

Variantes

Modo

Expanded (default): modo completo, com ícone e label visíveis em cada acesso, header com marca e controle de collapse, e footer com acessos de conta. É o comportamento padrão do menu de navegação do admin — a variante Fixed — exibido assim em todas as páginas dentro do App Shell.
Collapsed (rail): reduz o menu a uma faixa estreita de apenas ícones (expanded={false}), mostrando o label em um popover ao passar o cursor (conforme showPopoversWhenCollapsed) — passe o cursor por qualquer ícone para ver. É a opção que o merchant ativa no Desktop quando prioriza superfície de tela em relação à navegação visível.

Expanded

Gestão

Canais de venda

Aplicativos

Collapsed

Dependências

MenuExpandContext — quando o Menu é integrado dentro de App Shell, o modo expandido/recolhido pode ser herdado automaticamente desse contexto, sem necessidade de passar expanded manualmente em cada Menu.

Estados

A matriz mostra a aparência de um Menu.Button em cada estado: rest, hover, foco e selecionado (active).

Aplicação

Por ser o menu de navegação principal do admin, seu comportamento por dispositivo resolve os três casos reais de uso, suportados pelo App Shell: Fixed e Collapsed no Desktop, Drawer no Mobile.

Desktop

Comportamento padrão em todas as páginas do admin: o Menu é exibido fixo à esquerda, expandido, ocupando toda a altura da tela dentro do App Shell. Se a quantidade de seções ultrapassar a altura da tela, o Menu ativa um scroll interno, mantendo sempre visíveis o header e o footer.

Quando é necessário priorizar superfície de tela em relação à navegação visível, é possível recolhê-lo para um modo compacto (rail) que mostra apenas ícones, deixando o label disponível em um popover ao passar o cursor (variante Collapsed, ver Variantes). Essa variante pode ser ativada a pedido do merchant, por meio de um botão (Collapse), ou automaticamente quando a superfície de Chat da Lumi (agente de IA) é ativada dentro do admin.

Gestão

Canais de venda

Aplicativos

Mobile

Resolução mobile do mesmo menu (variante Drawer): em vez de ocupar espaço fixo, é exibido dentro de um Sidebar que abre sob demanda a partir de um acesso no header, e se fecha ao selecionar uma opção ou tocar fora.

Gestão

Canais de venda

Aplicativos

Do and Don'ts

Administrar

Agrupar sob um mesmo título apenas acessos relacionados entre si.

Administrar

Evitar misturar acessos sem relação temática sob um mesmo título.

Reservar o Badge para uma contagem realmente acionável, como os pedidos pendentes.

Evitar sobrecarregar cada acesso com um badge ou tag: perdem a capacidade de sinalizar o que é urgente.

Marcar como active o acesso da seção onde o usuário está.

Evitar deixar o menu sem nenhum acesso ativo quando o usuário já está dentro de uma seção.

Reservar o Footer para um acesso fixo de baixa frequência, mas sempre necessário.

Evitar colocar no Footer um acesso de uso frequente: esse tipo de acesso vai no Body.

Acessibilidade

Navegação por teclado: cada Menu.Button renderiza um <button> nativo (ou um <a> via as), recebendo foco com Tab e ativando com Enter ou Espaço; a ordem de foco segue a ordem real de Sections e Buttons no documento.
Acordeão acessível: Menu.ButtonAccordion aplica aria-expanded sobre seu disparador para refletir se o grupo está aberto ou fechado; o prop contentid (obrigatório) é o que vincula esse disparador ao conteúdo que ele expande, por isso deve ser sempre único dentro da página.
Foco visível: ao renderizar um <button>/<a> real, herda o mesmo anel de foco (:focus-visible) que o restante dos componentes interativos de Nimbus.
Label acessível no modo recolhido: quando o Menu está expanded={false} (rail) e o Button mostra apenas o ícone, o label continua disponível por meio de um popover ao passar o cursor (controlado por showPopoversWhenCollapsed), para que o significado do acesso não dependa só do ícone.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/menu

Default

Fixed menu

Drawer menu

Collapsed

Uso básico do Menu, sem o layout da interface em volta.

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
          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;

Props

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

Componentes relacionados

Menu Button — implementa cada acesso individual dentro do Menu.
App Shell — define o layout geral da aplicação e integra o Menu como sidebar, compartilhando o estado de expansão.
Sidebar — painel lateral usado para exibir o Menu como drawer em telas pequenas.
Nav Tabs — alternativa para navegar entre visualizações de um mesmo conteúdo, não entre seções da aplicação.

Name	Type	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.
showPopoversWhenCollapsed	boolean	Whether to show popover for buttons when the menu is collapsed. Defaults to true.
popoverPosition	'bottom' 'bottom-end' 'bottom-start' 'left' 'left-end' 'left-start' 'right' 'right-end' 'right-start' 'top' 'top-end' 'top-start'	Position of the popovers for buttons when the menu is collapsed. Defaults to "right".

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
onClick	() => void;	Function executed when clicking the button.
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.
active	boolean	Sets the state of the button as active/inactive.
startIcon	React.FC<IconProps>	Sets an icon element on the left of the button.
showPopoversWhenCollapsed	boolean	Whether to show popovers when the button is collapsed. Defaults to true.

Ajude-nos a melhorar a documentação

Encontrou um problema ou tem uma sugestão? Conte para a gente.

Compartilhe seu feedback

Menu

Quando usar

Quando não usar

Anatomia

Variantes

Modo

Dependências

Estados

Aplicação

Desktop

Mobile

Do and Don'ts

Acessibilidade

Implementação

Props

Componentes relacionados

Menu

Menu.Section

Menu.Header

Menu.Body

Menu.Footer

Ajude-nos a melhorar a documentação