React Storefront
|

Menu

import Menu from 'react-storefront/Menu'

The main app menu that slides in from the left when the AppHeader's menu button is clicked. Children are rendered above the list of menu items.

In addition to the CSS classes that can be overridden of menu subcomponents, you can also assign specific classes to individual menu items by specifying a value for the className field on any instance of MenuItemModel.

Props

NameTypeDefaultDescription
menuobject
drawerWidthnumber330

The width of the drawer in pixels

rootHeaderelement

An element to display at the top of the root of the menu

rootFooterelement

An element to display at the bottom of the root of the menu

renderLeafHeaderfunc

A function to render a custom header in leaf lists. It is passed an object with:

  • list: The menu model being rendered
  • goBack: A function to call to go back to the previous list

The function should return a React element or fragment.

renderLeafFooterfunc

A function to render a custom footer in leaf lists. It is passed an object with:

  • list: The menu model being rendered

The function should return a React element or fragment.

useExpandersbool

Set to true to use expandable menu items below depth 1

expandFirstItemboolfalse

Set to true to expand first item for not root items

openbool

Set to true to display the menu

persistentbool

Set to true to dock the menu so that it's always open and not modal

classesobjectOf : string

CSS classes for this component

onClosefunc

Called when the menu is closed

simpleboolfalse

Set to true to render a simple set of expanders rather than a multi-level drill down. Defaults to false.

ExpandIconfunc

The icon to use for collapsed groups

CollapseIconfunc

The icon to use for expanded groups

alignenum : 'left' |
'right'
'left'

Sets the side of the screen from which the menu appears.

itemRendererfunc

Overrides the default rendering of a menu item. It is passed the following arguments:

  • item - the MenuItemModel instance.

Return undefined to render the default contents

Example:

 itemRenderer={item => {
   return item.text === 'My Special Item ? <MySpecialItem/> : null
 }}
itemContentRendererfunc

Overrides the content of a menu item. It is passed the following arguments:

  • item - the MenuItemModel instance.
  • leaf - true when the item is a leaf node, otherwise false

Return null to render the default contents

Example:

 itemContentRenderer={(item, leaf) => {
   return leaf ? <ListItemText primary={item.text}/> : null
 }}
trackSelectedboolfalse

Set to true to show the item corresponding to the current URL as selected.