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.

Import
import Menu from 'react-storefront/Menu'

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

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

A function to render the contents of a menu item. It is passed the following arguments:

1.) item - the MenuItemModel instance. 2.) leaf - true when the item is a leaf node, otherwise false

Return undefined to render the default contents

Example:

itemRenderer={(item, leaf) => { return leaf ? <ListItemText primary={item.text}/> : undefined }}

CSS API

You can override all the class names injected by Moov-PWA thanks to the classes property. This property accepts the following keys:

  • drawer
  • list
  • listPadding
  • header
  • icon
  • headerText
  • hbox
  • listItem
  • link
  • listItemImage
  • listItemIcon
  • expander
  • leaf
  • expanded
  • drawerFixed
  • modal