Menu Button
El patrón Menu Button es un elemento interactivo cuyo objetivo es ofrecer acceso rápido a una sección o acción especifica dentro de una listado de accesos (Menu).
import React, { useState } from "react";
import { MenuButton } from "@nimbus-ds/patterns";
import { HomeIcon } from "@nimbus-ds/icons";
const Example: React.FC = () => {
const [active, setActive] = useState(false);
const handleActive = () => setActive(!active);
return (
<MenuButton
label="Menu button"
startIcon={HomeIcon}
onClick={handleActive}
active={active}
/>
);
};
export default Example;
Instalá el componente via terminal.
npm install @nimbus-ds/menubutton
Menu Button
- Cuando se necesitan mostrar múltiples acciones relacionadas con un objeto (ej. editar, duplicar, eliminar).
- En tooltips con acciones opcionales relacionadas al flujo de trabajo del usuario.
- Cuando se necesita mostrar un listado de accesos en donde pueden existir categorias principales de navegación y subcategorias
- Cuando solo hay una acción disponible: en ese caso se debe mostrar como botón directo.
- Cuando las acciones son primarias o de alta frecuencia de uso.
- Agrupa acciones relacionadas para minimizar el ruido visual y mantener la interfaz enfocada.
- Reduce la carga cognitiva al organizar funciones de forma predecible y contextual.
- Compatible con acciones en lote si se utiliza en conjunto con selecciones múltiples.
- Soporte completo de teclado: Tab para navegar, Enter o Space para abrir, flechas para desplazarse.
- Roles y atributos ARIA correctos (aria-haspopup, aria-expanded, aria-controls, menuitem).
- Asegurar foco visible al abrir el menú.
- Áreas táctiles adecuadas en dispositivos mobiles (mínimo 44x44px).
El Menu Button se compone de:
- Botón con ícono (⋮ o similar).
- Menú desplegable con una lista de acciones secundarias.
- Opciones con texto y, opcionalmente, iconos.
- Separadores para agrupar acciones cuando sea necesario.
- IconButton
- tooltip
- Icon
- Text
- Default: Ícono + texto.
- With tag: Ítem con tag. Se utiliza para comunicar atributos de la sección, como "nuevo" o "novedad".
- With badge: Ítem con badge. Se utiliza para mostrar cantidades o notificaciones numéricas, por ejemplo, la cantidad de ventas.
- With ícono: Ítem con ícono. Se utiliza para indicar un comportamiento específico, como redireccionamientos o apertura en una nueva pestaña.
- Accordion button: Ítem accionable que despliega opciones secundarias o complementarias.
✅ Do
- Usar íconos descriptivos junto al texto para mejorar la comprensión.
- Usar para agrupar acciones.
- Ordenar las opciones por relevancia y frecuencia.
- Asegurar una experiencia fluida con teclado y screen readers.
- Usar íconos cuando aporten claridad.
❌ Don't
- Colocar la acción principal de la interfaz dentro del menú.
- Usar el Menu Button con una única opción.
- No proporcionar feedback de foco al abrir.
- Repetir acciones ya visibles fuera del menú.
Additional props are passed to the <MenuButton> element. See button docs for a list of props accepted by the <MenuButton> element.
MenuButton
Name | Type | Default | Description |
---|---|---|---|
as | 'button' | The underlying element to render — either a HTML element name or a React component. | |
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. | |
active | boolean | Sets the state of the button as active/inactive. | |
children | React.ReactNode | Inner components displayed on the right of the button component. |
MenuButton.Accordion
Name | Type | Default | Description |
---|---|---|---|
children* | React.ReactNode | Content of the menu. | |
menuButton* | React.ReactNode | It will be the accordion anchor and can contain all the props available in the MenuButton component's API. | |
contentid* | string | Required ID used to maintain correct component accessibility, it will be passed on to MenuButtonAccordion's children. | |
open | boolean | Changes the component usage so that control of open and close is controlled from outside the component. | |
active | boolean | Sets the state of the button as active/inactive. |