@tikpage/reactjs-popup/docs/mds/6.menuExamples.md

React Popup Component - Modals,Tooltips and Menus — All in one

---
id: menu
position: 6
path: React Menu
title: React Popup |  Use case - React Menu Example
description: A simple tooltip example with reactjs-popup
redirects:
  - "use case - Menu"
---

import SimpleMenu from './../src/examples/SimpleMenu.js'

## React Menu

You can create a nested menu with reactjs-popup easily as the following example shows.

```jsx live=true


const Menu = () => (
  <div className="menu">
    <div className="menu-item"> Menu item 1</div>
    <div className="menu-item"> Menu item 2</div>
    <div className="menu-item"> Menu item 3</div>
    <Popup
      trigger={<div className="menu-item"> Sub menu </div>}
      position="right top"
      on="hover"
      closeOnDocumentClick
      mouseLeaveDelay={300}
      mouseEnterDelay={0}
      contentStyle={{ padding: "0px", border: "none" }}
      arrow={false}
    >
      <div className="menu">
        <div className="menu-item"> item 1</div>
        <div className="menu-item"> item 2</div>
        <div className="menu-item"> item 3</div>
      </div>
    </Popup>
    <div className="menu-item"> Menu item 4</div>
  </div>
);

render(<Menu />);
```

```css
.menu {
  width: 200px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}
.menu-item {
  cursor: pointer;
  padding: 5px;
  height: 28px;
  border-bottom: 1px solid rgb(187, 187, 187);
}
.menu-item:hover {
  color: #2980b9;
}
```