Menu

MenuBase component is a Paper with MenuItems. The menu items can be set up with a multidimensional menu array with object type of elements. The object can contain label and other MenuItem properties. If the object contain an items array, that mean a nested menu.
The Menu component based on the Popover and the MenuBase component. The MenuBase will show up in a ModalBase, and the Popover set its position to AnchorComponent

Props

MenuBase

Name	Type	Default	Description
menu	array		A multidimensional array with menu objects
PaperComponent	element type	Paper	The component used for the Paper node. Either a string to use a HTML element or a component.
PaperProps	object	{color:'paper1', size:'menu', ContentComponent: 'Modal'}	Passing props to the `PaperComponent`
MenuItemComponent	element type	MenuItem	The component used for menu items node. Either a string to use a HTML element or a component.
MenuItemProps	object		Passing props to the `MenuItemComponent`
classes	object {listPaper:'', popoverPaper:'', basePaper:''}		Adds these classNames to the corresponding element
selectable	bool	false	If true, the menu items become selectable. The selectable items in the menu array must have a `value` property
multiple	bool	false	If true, multiple selection will be enabled
value	array		Initial selected values
onChange	function		Fires when a change occurs. Its inputs `(event, value)`

The ref is forwarded to the root Paper element.

Name	Type	Default	Description
PopoverProps	object		Passing props to the `Popover`
classes	object {modal:'', listPaper:'', popoverPaper:'', basePaper:''}		Adds these classNames to the corresponding element

Examples

MenuBase Component usage for sidebars or other embed menus, the first example use list the second use the Popover Component for nested items

It is possible to mix the list and default popover menuType

Menu Component usage for Button Menu or Icon Menu or other drop and down type menus

Nested menus work in the same way as drop-down menus. The first example shows the menu menuType of the inner menu, the other shows the popover type (as in the first example on this page).

Disable inset, passing custom style to nested menu items

An extreme example for styling

Set up min-width with Container

/*noinspection ALL*/
.menuBasePaperDependsOnParentContainer {
    min-width: var(--digby-container-parent-side-min-width);
}

/*noinspection ALL*/
.menuPopoverPaperDependsOnRootContainer {
    min-width: var(--digby-container-root-side-min-width);
}

/*noinspection ALL*/
.menuModalDependsOnRootContainer > [data-popper-placement] {
    min-width: var(--digby-container-root-side-min-width);
}