STYLED MDL

Lists

Customizable scrollable lists.

Downward Opening Menus

/*--- Lower left ---*/
<Menu control={<Button icon><More /></Button>}>
  <MenuItem>Some Action</MenuItem>
  <MenuItem>Another Action</MenuItem>
  <MenuDivider />
  <MenuItem disabled>Disabled Action</MenuItem>
  <MenuItem>Yet another action</MenuItem>
</Menu

/*--- Lower right ---*/
<Menu bottomRight control={<Button icon><More /></Button>}>
  <MenuItem>Some Action</MenuItem>
  <MenuItem>Another Action</MenuItem>
  <MenuDivider />
  <MenuItem disabled>Disabled Action</MenuItem>
  <MenuItem>Yet another action</MenuItem>
</Menu>

Upward Opening Menus

/*--- Upper left ---*/
<Menu topLeft control={<Button icon><More /></Button>}>
  <MenuItem>Some Action</MenuItem>
  <MenuItem>Another Action</MenuItem>
  <MenuDivider />
  <MenuItem disabled>Disabled Action</MenuItem>
  <MenuItem>Yet another action</MenuItem>
</Menu>

/*--- Upper Right ---*/
<Menu topRight control={<Button icon><More /></Button>}>
  <MenuItem>Some Action</MenuItem>
  <MenuItem>Another Action</MenuItem>
  <MenuDivider />
  <MenuItem disabled>Disabled Action</MenuItem>
  <MenuItem>Yet another action</MenuItem>
</Menu>

Usage

<Menu>

PropTypeDefaultDescription
controlnodeundefinedThe element to render that will control the open/close state of the menu
bottomLeftbooleantrueAttaches the menu to the bottom left corner of the control
bottomRightbooleanfalseAttaches the menu to the bottom right corner of the control
topLeftbooleanfalseAttaches the menu to the top left corner of the control
topRightbooleanfalseAttaches the menu to the top right corner of the control

<MenuItem>

No Custom Props

<MenuDevider>

No Custom Props