npm package: @licuido-ui/ui_nested-menu
Description: A nested menu item is a menu item with a submenu. Registering a submenu this way allows it to be reused in menubar menus and toolbar button menus without having to define the submenu twice. The submenu can contain any combination of basic menu items and t
Latest version: 0.0.9

# NestedMenu

A nested menu item is a menu item with a submenu. Registering a submenu this way allows it to be reused in menubar menus and toolbar button menus without having to define the submenu twice. The submenu can contain any combination of basic menu items and toggle menu items.


### Author

- @author NestedMenu <hariharan@crayond.co>

## Link

[Story Book Link to MobileInput ](http://216.48.182.148:3333/?path=/docs)

### PlayGround

[Try it have a fun codeBox](https://codesandbox.io/p/sandbox/hungry-cache-zglwy6?file=%2Fsrc%2FApp.js%3A16%2C30)

## Installation

```sh
npm i @licuido-ui/ui_nested-menu
```

## Import component

```jsx
import { NestedMenu } from '@licuido-ui/ui_nested-menu';
```

## Usage

```jsx
<NestedMenu  dropDownProps={}/>
```
## Image

![alt text](./nestedMenu.png)

## Sample Code
```jsx

<NestedMenu  
   menuButtonProps={
      onClick: () => false,
      menuName: 'My Menu',
    }
   dropDownProps={
    {
      open: true,
      anchorEl: undefined,
      configuration: [
        {
          id: 'menu1',
          key: 'menu1',
          caption: 'Menu 1',
          subMenu: [
            {
              id: 'menu1.1',
              key: 'menu1.1',
              caption: 'Menu 1.1',
              subMenu: [
                {
                  id: 'menu1.1.1',
                  key: 'menu1.1.1',
                  caption: 'Menu 1.1.1',
                  onClick: () => console.log('Menu 1.1.1'),
                },
                {
                  id: 'menu1.1.2',
                  key: 'menu1.1.2',
                  caption: 'Menu 1.1.2',
                  onClick: () => console.log('Menu 1.1.1'),
                },
                {
                  id: 'menu1.1.3',
                  key: 'menu1.1.3',
                  caption: 'Menu 1.1.3',
                  onClick: () => console.log('Menu 1.1.3'),
                },
              ],
            },
            {
              id: 'menu1.2',
              key: 'menu1.2',
              caption: 'Menu 1.2',
              subMenu: [
                {
                  key: 'Menu 1.2.1',
                  caption: 'Menu 1.2.1',
                  onClick: () => console.log('Menu 1.2.1'),
                },
              ],
            },
          ],
        },
        {
          id: 'menu2',
          key: 'menu2',
          caption: 'Menu 2',
          subMenu: [
            {
              id: 'menu2.1',
              key: 'menu2.1',
              caption: 'Menu 2.1',
              subMenu: [
                {
                  id: 'menu2.1.1',
                  key: 'menu2.1.1',
                  caption: 'Menu 2.1.1',
                  onClick: () => console.log('Menu 2.1.1'),
                },
                {
                  id: 'menu2.1.2',
                  key: 'menu2.1.2',
                  caption: 'Menu 2.1.2',
                  onClick: () => console.log('Menu 2.1.1'),
                },
              ],
            },
            {
              id: 'menu2.2',
              key: 'menu2.2',
              caption: 'Menu 1.2',
              subMenu: [
                {
                  id: 'Menu 2.2.1',
                  key: 'Menu 2.2.1',
                  caption: 'Menu 2.2.1',
                  onClick: () => console.log('Menu 2.2.1'),
                },
              ],
            },
          ],
        },
      ],
      onClose: () => false,
    }
}


/>
```
## Props

| **Name**              | **Description**                                                                                                                                                               | **Default** | **Control**                                                                                          |
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------- |
| **menuButtonProps\*** | \{ onClick: \(\) =&gt; void; menuName: string; \}                                                                                                                             | \-          | menuButtonProps : \{onClick : \(\) =&gt; falsemenuName : "My Menu"\}                                 |
| **dropDownProps\***   | \{ open: boolean; anchorEl?: HTMLButtonElement; configuration: NestedMenuConfiguration\[\]; onClose?: event: Event, reason: "backdropClick" \| "escapeKeyDown" =&gt; void; \} | \-          | dropDownProps : \{open : trueanchorEl : undefined configuration :2 itemsonClose : \(\) =&gt; false\} |
| **className**         | string                                                                                                                                                                        | \-          | Set string                                                                                           |
| **sx**                | SxProps&lt;Theme&gt;                                                                                                                                                          | \-          | Set object                                                                                           |
| **menuPaperStyle**    | SxProps&lt;\{\}&gt;                                                                                                                                                           | \-          | Set object                                                                                           |
| **menuItemStyle**     | SxProps&lt;\{\}&gt;                                                                                                                                                           | \-          | Set object                                                                                           |