Menu Button

1.6.0

The Menu Button component allows the user to create in-app menu-buttons that navigate through different sections of an application.

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;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/menubutton

Props

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

MenuButton

Name	Type	Description
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

Name	Type	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.