HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>arrow key navigation</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 320px; }
    #list { list-style: none; padding: 0; margin: 0 0 12px; border: 2px solid #cbd5e1; border-radius: 8px; outline: none; }
    #list:focus { border-color: #6366f1; }
    #list li { padding: 10px 14px; cursor: default; border-bottom: 1px solid #e2e8f0; }
    #list li:last-child { border-bottom: none; }
    #list li.active { background: #6366f1; color: #fff; }
    #status { color: #64748b; font-size: 14px; }
  </style>
</head>
<body>
  <ul id="list" tabindex="0">
    <li class="active">Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
    <li>Date</li>
  </ul>
  <p id="status">Selected: Apple — use Up/Down arrows</p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    var $items = $("#list li");
    $("#list").on("keydown", { wrap: true }, function(event) {
      var $active = $items.filter(".active");
      var index = $items.index($active);
      if (event.which === 40) {
        event.preventDefault();
        index = Math.min(index + 1, $items.length - 1);
      } else if (event.which === 38) {
        event.preventDefault();
        index = Math.max(index - 1, 0);
      } else {
        return;
      }
      $items.removeClass("active").eq(index).addClass("active");
      $("#status").text("Selected: " + $items.eq(index).text());
    }).focus();
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery keydown — arrow keys list navigation (Try It)