El componente Menu permite agrupar un conjunto de acciones o navegaciones en un listado desplegable, en ocaciones activado desde un botón o ícono. Es fundamental para presentar opciones de manera organizada, evitando el ruido visual y manteniendo la interfaz limpia. Favorece la accesibilidad a funciones secundarias sin comprometer la jerarquía visual del contenido 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;

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/menu

Cuando hay menos de dos acciones disponibles. Mostralas directamente.
Para acciones principales o críticas. Estas deben estar visibles sin interacción adicional.
En flujos donde cada opción requiere explicación o contexto extenso.
En flujos donde se requieran navegar de manera secuencial (pasos) ese caso usar Accordion o Stepper según sea el caso.

Criterios de usabilidad y productividad

Acceso rápido a funciones: Reduce el número de clics y mantiene el foco en el contenido principal.
Optimiza el uso del espacio: Presenta acciones solo cuando se requieren, evitando sobrecargar la interfaz.
Agrupación lógica: Las acciones agrupadas reducen la carga cognitiva y simplifican la toma de decisiones.

Buenas prácticas de accesibilidad

Para garantizar una experiencia inclusiva:

Soporte total para navegación con teclado (Tab, Shift+Tab, flechas).
Roles ARIA apropiados: menu, menuitem.
Labels claros y visibles para lectores de pantalla.
Estados de foco visibles y claros.
Áreas táctiles adecuadas en dispositivos mobiles (mínimo 44x44px).
No depender del color como único indicador de estado.

Anatomía

El Menu incluye:

Activator: Botón o ícono que dispara el menú.
Container
Logo
Menu buttons: Opciones del menú con iconos opcionales.
Separadores: Para agrupar acciones por contexto.
Label: Nombre de la categorias de accesos

Dependencias

MenuButton
Icon
Tooltip
List item

Variantes

Default: Menu sin contenedor
Fixed menu: Menu fijo ubicado a la izquierda de la interfaz.
Drawer menu: Menu anclado dentro de un Side Modal. Se dispara desde un tigger

✅ Do

Ordenar las acciones de más a menos utilizadas.
Cerrar el menú al hacer clic fuera o tras seleccionar una opción.
Desplegar acciones secundarias al hacer click sobre acción principal

❌ Don't

No ocultar acciones importantes que deberían ser visibles permanentemente.
No usar solo íconos sin etiquetas (falla de accesibilidad).
En menu contextuales en tooltip no sobrecargar el menú con más de 7 ítems.
No permitir acciones destructivas sin confirmación contextual.

Props

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

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

Implementación

Menu

Cuándo usar

Cuándo no usar

Criterios de usabilidad y productividad

Buenas prácticas de accesibilidad

Anatomía

Dependencias

Variantes

Props

Menu

Menu.Section

Menu.Header

Menu.Body

Menu.Footer