@licuido-ui/ui_nested-menu v0.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

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_nested-menu

Import component

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

Usage

<NestedMenu  dropDownProps={}/>

Image

Sample Code

<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