React Menu

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

Menu item 1

Menu item 2

Menu item 3

Sub menu

Menu item 4

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>);

.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;}