Menu

Menus display a list of choices on a transient sheet of material. Menus appear upon interaction with a button, action, or other control. They display a list of choices, with one choice per line. Menu items may be disabled if not applicable to a certain context. Contextual menus dynamically change their available menu items based on the current state of the app. Menus should not be used as a primary method for navigation within an app.

Simple Menu

To show this type of Cards you will need this code in down here.

     
 <div>
    <Button
         aria-owns={this.state.open ? 'simple-SidenavContent.js' : null}
         aria-haspopup="true"
         onClick={this.handleClick} >
         Open Menu
    </Button>
    <Menu
         id="simple-menu"
         anchorEl={this.state.anchorEl}
         open={this.state.open}
         onClose={this.handleRequestClose} >
            <MenuItem onClick={this.handleRequestClose}>Profile</MenuItem>
            <MenuItem onClick={this.handleRequestClose}>My account</MenuItem>
            <MenuItem onClick={this.handleRequestClose}>Logout</MenuItem>
    </Menu>
</div>
  

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
anchorEl	object		The DOM element used to set the position of the menu.
children	node		Menu contents, normally MenuItems.
classes	object		Useful to extend the style applied to components.
MenuListProps	object		Properties applied to the MenuList element.
onClose	func		Callback fired when the component requests to be closed. Signature: function(event: object) => void event: The event source of the callback
onEnter	func		Callback fired before the Menu enters.
onEntered	func		Callback fired when the Menu has entered.
onEntering	func		Callback fired when the Menu is entering.
onExit	func		Callback fired before the Menu exits.
onExited	func		Callback fired when the Menu has exited.
onExiting	func		Callback fired when the Menu is exiting.
open *	bool		If true, the menu is visible.
PopoverClasses	object		classes property applied to the Popover element.
transitionDuration	union: number |  {enter?: number, exit?: number} |  enum: 'auto'	'auto'	The length of the transition in ms, or 'auto'