José Lizana
Posted on August 30, 2022
A Lava-Lamp menu contains an indicator that moves to the selected position when we select an option.
We can see this type of navigation, (for example) in the AppleTV interface.
Still not clear? Take a look at this demo:
https://react-llamp-menu-demo.netlify.app/
How to create it?
1.-Install the dependency
npm i react-llamp-menu
2.-Import
import {LavalampMenu} from 'react-llamp-menu';
3.-Add a menu structure like this
<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>
4.-customize using CSS
Check out the project on gitHub
https://github.com/jlizanab/react-llamp-menu
Watch a demo on CodeSandbox
https://codesandbox.io/s/react-llamp-menu-luq9ht
💖 💪 🙅 🚩
José Lizana
Posted on August 30, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.