Menu
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.
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;Instalá el componente via terminal.
npm install @nimbus-ds/menuMenu
Utilizar Menu cuando sea necesario:
- Mostrar acciones relacionadas con una función (ej. configuración, canales de venta).
- Agrupar accesos secundarios que no requieren protagonismo constante.
- Guiar al usuario sobre el mapa de navegación del sistema o un flujo de configuracion.
Evitar usar el Menu en estos casos:
- 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.
- 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.
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.
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
- MenuButton
- Icon
- Tooltip
- List item
- 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.
Las propiedades adicionales se pasan al elemento <Menu>. Consultá la documentación para ver la lista de atributos aceptados por el 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. |