How to Build a Lava-Lamp Style Navigation Menu with React

August 31, 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:

How to create it?
1.-Install the dependency
npm i react-llamp-menu

import {LavalampMenu} from 'react-llamp-menu';

3.-Add a menu structure like this

    <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>
Enter fullscreen modeExit fullscreen mode

4.-customize using CSS

Check out the project on gitHub

Watch a demo on CodeSandbox

Source link

Comments 0

Leave a Reply

Your email address will not be published. Required fields are marked *