JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <div>Line 1</div>
    <div>Line 2</div>
    <div>Line 3</div>
    <div>Line 4</div>
    <div>Line 5</div>
    <div>Line 6</div>
</div>

CSS

#nav{
  width: 300px;
  border-top: 1px solid #000;
}

#nav div{   
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  cursor: pointer;
}

JavaScript

function ondivchange(div, i){
    // div is the highlighted div
    // i is it's index
}

(function(callback){
    callback = callback || function(){};
    var divs = document.getElementById('nav').getElementsByTagName('div'),
    selectedDiv = 0,
    i;

    for(i = 0; i < divs.length; i++){
        divs[i].onmouseover = (function(i){
           return function(){
               divs[selectedDiv].style.backgroundColor = '';
               selectedDiv = i;
               divs[selectedDiv].style.backgroundColor = '#68F';
               callback(divs[selectedDiv], selectedDiv);
           }
        })(i);
    }

    divs[selectedDiv].style.backgroundColor = '#68F';

    document.onkeydown = function(e){
         var x = 0;
         if(e.keyCode == 38)
             x = -1;
         else if(e.keyCode == 40)
             x = 1;
         else
             return;
         divs[selectedDiv].style.backgroundColor = '';
         selectedDiv = ((selectedDiv+x)%divs.length);
         selectedDiv = selectedDiv < 0 ? 
           divs.length+selectedDiv : selectedDiv;
         divs[selectedDiv].style.backgroundColor = '#68F';
         callback(divs[selectedDiv], selectedDiv);
    };

})(ondivchange);