JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="nav">
    <li>
        <a href="#">Element 1</a>
    </li>
    <li>
        <a href="#">Element 2</a>
    </li>
    <li>
        <a href="#">Element 3</a>
    </li>
</ul>

CSS

#nav { margin: 20px; }
#nav a.active { color: red; }

JavaScript

function bindMoveKeys() {
    $(document).on('keydown', function(event) {
       if (event.ctrlKey) {
           $('#nav a').removeClass('active');
           switch (event.keyCode) {
               case 38: // вверх
                   $('#nav a:last').addClass('active');
                   break;
               case 40: // вниз
                   $('#nav a:first').addClass('active');
                   break;
           }
       }
    });
}

// выполняем функцию по DOM ready
$(bindMoveKeys);