Menu Button

1.6.0

O padrão **Menu Button** é um elemento interativo cujo objetivo é oferecer acesso rápido a uma seção ou ação específica dentro de uma listagem de acessos (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;

Instale o componente via terminal.

npm install @nimbus-ds/menubutton

Menu Button

  • Quando se precisa mostrar múltiplas ações relacionadas com um objeto (ex. editar, duplicar, eliminar).
  • Em tooltips com ações opcionais relacionadas ao fluxo de trabalho do usuário.
  • Quando se precisa mostrar uma listagem de acessos onde podem existir categorias principais de navegação e subcategorias
  • Quando há apenas uma ação disponível: nesse caso deve ser mostrado como botão direto.
  • Quando as ações são primárias ou de alta frequência de uso.
  • Agrupa ações relacionadas para minimizar o ruído visual e manter a interface focada.
  • Reduz a carga cognitiva ao organizar funções de forma previsível e contextual.
  • Compatível com ações em lote se utilizado em conjunto com seleções múltiplas.
  • Suporte completo de teclado: Tab para navegar, Enter ou Space para abrir, setas para deslocar-se.
  • Roles e atributos ARIA corretos (aria-haspopup, aria-expanded, aria-controls, menuitem).
  • Assegurar foco visível ao abrir o menu.
  • Áreas táteis adequadas em dispositivos móveis (mínimo 44x44px).

O Menu Button se compõe de:

  1. Botão com ícone (⋮ ou similar).
  2. Menu suspenso com uma lista de ações secundárias.
  3. Opções com texto e, opcionalmente, ícones.
  4. Separadores para agrupar ações quando necessário.
  • IconButton
  • tooltip
  • Icon
  • Text
  • Default: Ícone + texto.
  • With tag: Item com tag. Utiliza-se para comunicar atributos da seção, como "novo" ou "novidade".
  • With badge: Item com badge. Utiliza-se para mostrar quantidades ou notificações numéricas, por exemplo, a quantidade de vendas.
  • With ícone: Item com ícone. Utiliza-se para indicar um comportamento específico, como redirecionamentos ou abertura em uma nova aba.
  • Accordion button: Item acionável que desdobra opções secundárias ou complementares.

Do

  • Usar ícones descritivos junto ao texto para melhorar a compreensão.
  • Usar para agrupar ações.
  • Ordenar as opções por relevância e frequência.
  • Assegurar uma experiência fluida com teclado e screen readers.
  • Usar ícones quando agregarem claridade.

Don't

  • Colocar a ação principal da interface dentro do menu.
  • Usar o Menu Button com uma única opção.
  • Não proporcionar feedback de foco ao abrir.
  • Repetir ações já visíveis fora do menu.

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.