@bolttech/atoms-side-menu v0.18.1

SideMenu Component

The SideMenu component is a React component designed to provide a customizable side menu navigation. This component allows users to select different menu items, which can trigger various actions.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing

Installation

To use the SideMenu component in your React application, follow these steps:

Installation

npm install @bolttech/frontend-foundations @bolttech/atoms-side-menu

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-side-menu

Once you have the required dependencies installed, you can start using the SideMenu component in your React application.

Props

The SideMenu component accepts the following props:

The MenuItem type consists of a set of attributes that will define the menus

Example

Here's an example of using the SideMenu component:

const [selected, setSelected] = useState('');

<SideMenu
  selected={selected}
  variant={variant}
  dataTestId="side-menu"
  items={[
    {
      label: 'Menu 1.1',
      onClick: setSelected,
      value: 'menu1.1',
    },
    {
      label: 'Menu 1.2',
      items: [
        {
          label: 'Menu 1.2.1',
          onClick: setSelected,
          value: 'menu1.2.1',
        },
        {
          label: 'Menu 1.2.2',
          icon: 'subscriptions',
          items: [
            {
              label: 'Menu 1.2.2.1',
              onClick: setSelected,
              value: 'menu1.2.2.1',
            },
            {
              label: 'Menu 1.2.2.2',
              onClick: setSelected,
              value: 'menu1.2.2.2',
            },
          ],
        },
      ],
    },
    {
      label: 'Menu 1.3',
      onClick: setSelected,
      value: 'menu1.3',
    },
    {
      label: 'Menu 1.4',
      onClick: setSelected,
      value: 'menu1.4',
    },
  ]}
/>;

Contributing

Contributions to the SideMenu component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.