Menu Button

1.6.0

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:

  1. Botón con ícono (⋮ o similar).
  2. Menú desplegable con una lista de acciones secundarias.
  3. Opciones con texto y, opcionalmente, iconos.
  4. 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

NameTypeDefaultDescription

as

'button'
'a'
React.ElementType

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

NameTypeDefaultDescription

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.