To help you get started, we've collected the most common ways that @rmwc/menu is being used within popular public projects.

fluidtrends / chunky / web / lib / components / Dashboard.js View on Github

var _this3 = this;

      if (this.props.renderContent) {
        return _react2.default.createElement('div', null);
      }

      return _react2.default.createElement(
        'div',
        { style: {
            alignSelf: 'stretch',
            backgroundColor: this.props.sectionsBackgroundColor,
            textAlign: 'left',
            paddingLeft: '20px'
          } },
        _react2.default.createElement(
          _menu.MenuAnchor,
          { style: {
              padding: '10px'
            } },
          _react2.default.createElement(
            _button.Button,
            {
              style: {
                display: 'flex',
                flexDirection: 'row',
                alignItems: 'center',
                color: this.props.sectionSelectedColor
              },
              onClick: function onClick(evt) {
                return _this3.setState({ 'compactMenuIsOpen': !_this3.state.compactMenuIsOpen });
              } },
            this.props.section.menuTitle,

View more ways to use @rmwc/menu

Menus

Menus display a list of choices on a transient sheet of material.

• Module @rmwc/menu
• Import styles:
  • Using CSS Loader
    • import '@rmwc/menu/styles';
  • Or include stylesheets
    • '@material/menu/dist/mdc.menu.css'
    • '@material/menu-surface/dist/mdc.menu-surface.css'
    • '@material/ripple/dist/mdc.ripple.css'
    • '@material/list/dist/mdc.list.css'
    • '@rmwc/icon/icon.css'
• MDC Docs: https://material.io/develop/web/components/menus/

Basic Usage

You can compose a menu with the given components, and manually manage the open state. Menu expects MenuItems as children while MenuSurface is a generic container which can have anything as a child.

function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    
      <menu open="{open}"> console.log(evt.detail.index)}
        onClose={() =&gt; setOpen(false)}
      &gt;
        <menuitem>Cookies</menuitem>
        <menuitem>Pizza</menuitem>
        {/** MenuItem is just a ListItem, so you can intermingle other List components */}
        
        <menuitem>Icecream</menuitem>
      </menu>

      <button> setOpen(!open)}&gt;
        Menu
      </button>
    
  );
}

function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    
       setOpen(false)}>
        <div style="{{">
          Make the content whatever you want.
        </div>
      

      <button> setOpen(!open)}&gt;
        Menu Surface
      </button>
    
  );
}

function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    
       setOpen(false)}>
        <div style="{{">Menu</div>
      
      {/** The handle can be any component you want */}
       setOpen(!open)} /&gt;
    
  );
}

function Example() {
  const [open, setOpen] = React.useState(false);

  return (
    
      <menu open="{open}"> console.log(evt.detail.index)}
        onClose={() =&gt; setOpen(false)}
      &gt;
        <menuitem>Item One</menuitem>
        <menuitem disabled="">Item Two (disabled)</menuitem>
        <menuitem>Item Three</menuitem>
      </menu>

      <button> setOpen(!open)}&gt;
        Menu
      </button>
    
  );
}

Simplified usage

RMWC provides a convenience SimpleMenu component that takes a handle as a prop, and manages the open state for you.

Simple Menu}>
  <menuitem>Cookies</menuitem>
  <menuitem>Pizza</menuitem>
  <menuitem>Icecream</menuitem>

Simple Menu Surface}>
  <div style="{{">
    Make the content whatever you want.
  </div>

Anchoring

By default, Menus will attempt to automatically position themselves, but this behavior can be overridden by setting the anchorCorner prop.

function Example() {
  const [anchorCorner, setAnchorCorner] =
    React.useState('topLeft');

  return (
    <>
      
        
          <div style="{{">
            anchorCorner: {anchorCorner}
          </div>
        
        <button label="Anchored Menu">
      

      <select label="anchorCorner" value="{anchorCorner}"> setAnchorCorner(evt.currentTarget.value)}
        options={[
          'topLeft',
          'topRight',
          'bottomLeft',
          'bottomRight',
          'topStart',
          'topEnd',
          'bottomStart',
          'bottomEnd'
        ]}
      /&gt;
    
  );
}

Rendering through Portals

Occasionally, you may find your menu being cut off from being inside a container that is styled to be overflow:hidden. RMWC provides a renderToPortal prop that lets you use React's portal functionality to render the menu dropdown in a different container.

You can specify any element or selector you want, but the simplest method is to pass true and use RMWC's built in Portal component.

  `
  // Somewhere at the top level of your app
  // Render the RMWC Portal
  // You only have to do this once
  import React from 'react';
  import { Portal } from '@rmwc/base';

  export default function App() {
    return (
      
        ...
        
      
    )
  }
`

Now you can use the renderToPortal prop. Below is a contrived example of a menu being cut off due to overflow: hidden.

function Example() {
  const [renderToPortal, setRenderToPortal] = React.useState(true);
  const [menuIsOpen, setMenuIsOpen] = React.useState(false);
  const options = ['Cookies', 'Pizza', 'Icecream'];
  return (
    <>
      
        
           setMenuIsOpen(!menuIsOpen)}>
            Open Menu
          
           setMenuIsOpen(false)}
            renderToPortal={renderToPortal}
          >
            {options.map((o) => (
              {o}
            ))}
          
        
      
       setRenderToPortal(evt.currentTarget.checked)}
        label="renderToPortal"
      />
    
  );
}

Menu

A menu component for displaying lists items.

Props

MenuItem

This is just the ListItem component exported from the Menu module for convenience. You can use ListItem or SimpleListItem components from the List section as long as you add role="menuitem" and tabIndex="0" to the components for accessibility.

Props

MenuSurface

Props

MenuSurfaceAnchor

MenuSurfaceAnchor

SimpleMenu

A Simplified menu component that allows you to pass a handle element and will automatically control the open state and add a MenuSurfaceAnchor

Props

SimpleMenuSurface

The same as SimpleMenu, but a generic surface.

Props