JSFiddle - React, Tailwind, and code Playground

HTML

<div id="nav">
    <input type="text" />
    <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, #nav input{
  width: 300px; 
}

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

JavaScript

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';
           }
        })(i);
        
        divs[i].onclick = function(){
            document.getElementById('nav').
              getElementsByTagName('input')[0].focus();
            document.getElementById('nav').
              getElementsByTagName('input')[0].value = (this.innerText || this.textContent);
        };
    }

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

    document.getElementById('nav').
      getElementsByTagName('input')[0].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;
         document.getElementById('nav').
           getElementsByTagName('input')[0].value = 
             (divs[selectedDiv].innerText || divs[selectedDiv].textContent);
         divs[selectedDiv].style.backgroundColor = '#68F';
    };

    document.getElementById('nav').
      getElementsByTagName('input')[0].focus();