คุณสมบัติ CSS nav-down สำหรับการนำทางด้วยแป้นพิมพ์

คุณสมบัติ nav-down (รวมถึง nav-up, nav-left, nav-right) เป็นส่วนหนึ่งของ CSS Navigation Module Level 1 ใช้สำหรับกำหนดลำดับการโฟกัส (focus navigation) เมื่อผู้ใช้กดปุ่มลูกศรบนแป้นพิมพ์หรือรีโมตคอนโทรล

สถานะปัจจุบัน: คุณสมบัตินี้ถูกยกเลิก (deprecated) และถูกแทนที่ด้วย focus-navigation ใน CSS UI Module Level 4 รองรับเฉพาะบราวเซอร์เก่าและบางรุ่นของ Opera/TV browsers

ตัวอย่างโค้ด (สำหรับการศึกษา)

<!DOCTYPE html>
<html>
<head>
  <style>
    button {
      position: absolute;
    }
    button#btn1 {
      top: 10%; left: 15%;
      nav-index: 1;
      nav-right: #btn2; nav-left: #btn4;
      nav-down: #btn2; nav-up: #btn4;
    }
    button#btn2 {
      top: 30%; left: 30%;
      nav-index: 2;
      nav-right: #btn3; nav-left: #btn1;
      nav-down: #btn3; nav-up: #btn1;
    }
    button#btn3 {
      top: 50%; left: 15%;
      nav-index: 3;
      nav-right: #btn4; nav-left: #btn2;
      nav-down: #btn4; nav-up: #btn2;
    }
    button#btn4 {
      top: 30%; left: 0%;
      nav-index: 4;
      nav-right: #btn1; nav-left: #btn3;
      nav-down: #btn1; nav-up: #btn3;
    }
  </style>
</head>
<body>
  <button id="btn1">Result1</button>
  <button id="btn2">Result2</button>
  <button id="btn3">Result3</button>
  <button id="btn4">Result4</button>
</body>
</html>

ตัวเลือกสมัยใหม่: ใช้ tabindex ร่วมกับ JavaScript focus management หรือ CSS focus-within, :focus-visible สำหรับการควบคุมโฟกัสที่เข้าถึงได้ (accessible) และรองรับกว้างขวาง