Opening and Closing

By default, the Menu opens and closes the items which contain children on mouseover and mouseleave with a small delay.

To customize its opening and closing behavior, utilize the following options:

Delay on Hover

To prevent the accidental opening or closing of the Menu items, the component waits for 100 milliseconds before performing the action. To change the default delay, use the hoverOpenDelay and hoverCloseDelay properties of the Menu.

class App extends React.Component {
       render() {
           return (
               <Menu hoverOpenDelay={0} hoverCloseDelay={200}>
                   <MenuItem text="Item1">
                       <MenuItem text="Item1.1" />
                       <MenuItem text="Item1.2">
                           <MenuItem text="Item1.2.1" />
                           <MenuItem text="Item1.2.2" />
                       </MenuItem>
                   </MenuItem>
                   <MenuItem text="Item2">
                       <MenuItem text="Item2.1" />
                       <MenuItem text="Item2.2" />
                   </MenuItem>
                   <MenuItem text="Item3" />
               </Menu>
           );
       }
   }
   ReactDOM.render(
       <App />,
       document.querySelector('my-app')
   );

Opening on Item Click

By default, the Menu items open on hover. You can disable the open-on-hover behavior and set the Menu to open only after an item is clicked or focused by using the openOnClick property. After the user clicks an item for the second time, the open-on-hover behavior will be still disabled until another click follows.

class App extends React.Component {
       render() {
           return (
               <Menu openOnClick={true}>
                   <MenuItem text="Item1">
                       <MenuItem text="Item1.1" />
                       <MenuItem text="Item1.2">
                           <MenuItem text="Item1.2.1" />
                           <MenuItem text="Item1.2.2" />
                       </MenuItem>
                   </MenuItem>
                   <MenuItem text="Item2">
                       <MenuItem text="Item2.1" />
                       <MenuItem text="Item2.2" />
                   </MenuItem>
                   <MenuItem text="Item3" />
               </Menu>
           );
       }
   }
   ReactDOM.render(
       <App />,
       document.querySelector('my-app')
   );

In this article