react-llamp-menu demo

Basic example (without extra css)

Show code (JSX)

<LavalampMenu>
  <ul>
    <li><button onClick={()=>console.log('option 1')}>First option</button></li>
    <li><button onClick={()=>console.log('option 2')}>Second option</button></li>
    <li><button onClick={()=>console.log('option 3')}>Third option</button></li>
  </ul>
</LavalampMenu>

Rounded marker

Show code (JSX + CSS (css))

<LavalampMenu className="roundedOptions">
  <ul>
    <li><button onClick={()=>console.log('option 1')}>First option</button></li>
    <li><button onClick={()=>console.log('option 2')}>Second option</button></li>
    <li><button onClick={()=>console.log('option 3')}>Third option</button></li>
  </ul>
</LavalampMenu>

.lavalampMenu.roundedOptions{
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
  
    button{
      height:45px;
      padding:0 20px;
      cursor: pointer;
      transition: all 0.5s;
  
      &.selected{color:white; font-weight: normal}
    }
    
    /*marker*/
    .indicator{
      background-color:#d92a1c;
      border-radius:50px
    }
  }

tab Style

Show code (JSX + CSS (css))

<LavalampMenu className="tabOptions">
  <ul>
    <li><button onClick={()=>console.log('option 1')}>First option</button></li>
    <li><button onClick={()=>console.log('option 2')}>Second option</button></li>
    <li><button onClick={()=>console.log('option 3')}>Third option</button></li>
  </ul>
</LavalampMenu>

.lavalampMenu.tabOptions{
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
  
    ul{border-bottom: 1px solid #d7d7d7;}
  
    button{
      height:45px;
      padding:0 20px;
      cursor: pointer;
      transition: all 0.5s;
  
      &.selected{ color:#d92a1c}
    }
    
    /*marker*/
    .indicator{
      background-color:#d92a1c;
      height:6px;
      top: auto;
      bottom: -6px;
    }
  }

Toggle Style

Show code (JSX + CSS (css))

<div className="center">
  <LavalampMenu className="toggleOptions">
    <ul>
      <li><button onClick={()=>console.log('option 1')}>First option</button></li>
      <li><button onClick={()=>console.log('option 2')}>Second option</button></li>
      <li><button onClick={()=>console.log('option 3')}>Third option</button></li>
    </ul>
  </LavalampMenu>
</div>

.toggleOptions{
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    display: inline-block;
    background-color: #dedbdb;
    border-radius: 30px;
  
  
    button{
      height:45px;
      padding:0 20px;
      cursor: pointer;
      transition: all 0.5s;
      margin:0 3px;
  
      &.selected{color: inherit !important; font-weight: normal}
    }
    
    /*marker*/
    .indicator{
      background-color:white !important;
      border-radius:50px;
      height:calc(100% - 6px) !important;
      margin-top: 3px;
    }
  }