How to define where to navigate when using the arrow keys in CSS ?

26 May, 2021
In this article, we will learn how to define where to navigate when using the arrow keys in CSS.
Approach: We can do this task by using nav-up, nav-down, nav-right, and nav-up CSS properties together. These properties are used to navigate through the navigation key from the keyboard. The properties define where to focus when the user is navigating by using the navigation key. So by using these four properties we can do this task in the following steps:
When we are on the left button we will set the nav-right and nav-down value to #Geeks2 which is the upper button and the nav-left and nav-up value to #Geeks4 which is the down button.
Same as we do with other buttons, we can navigate through the navigation key from the keyboard.
Syntax:
nav-up: auto | id | target-name | initial | inherit;
nav-down: auto | id | target-name | initial | inherit;
nav-right: auto | id | target-name | initial | inherit;
nav-left: auto | id | target-name | initial | inherit;
Note: Only Opera 12.0 is supported by these properties.
Example:
HTML
<!DOCTYPE html><html>  <head>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">    <style>    body{      font-size: 30px;    }        button {            position: absolute;        }                  h1 {            color: green;        }                  button {            background-color: rgb(153, 153, 153);            border-radius: 25px;            font-size: 20px;        }        /*When we are on Left button we change it's          navigation using nav properties*/        #Geeks1 {            nav-right: #Geeks2;             nav-left: #Geeks4;            nav-down: #Geeks2;             nav-up: #Geeks4;            top: 35%;            left: 43%;            nav-index: 1;        }        /*When we are on top button we change it's          navigation using nav properties*/        #Geeks2 {            nav-right: #Geeks3;             nav-left: #Geeks1;            nav-down: #Geeks3;             nav-up: #Geeks1;            top: 50%;            left: 65%;            nav-index: 2;        }        /*When we are on right button we change it's          navigation using nav properties*/        #Geeks3 {            nav-right: #Geeks4;             nav-left: #Geeks2;            nav-down: #Geeks4;             nav-up: #Geeks2;            top: 65%;            left: 43%;            nav-index: 3;        }        /*When we are on bottom button we change it's          navigation using nav properties*/        #Geeks4 {            nav-right: #Geeks1;             nav-left: #Geeks3;            nav-down: #Geeks1;             nav-up: #Geeks3;            top: 50%;            left: 20%;            nav-index: 4;        }    </style></head>  <body>    <center>        <h2>GeeksforGeeks</h2>        <p>           Press the <samp>Shift</samp>           key while navigating with the arrow keys.        </p>      </center>    <button id="Geeks1">Up        <i class="fa fa-arrow-up"></i>    </button>    <button id="Geeks2">Right        <i class="fa fa-arrow-right"></i>    </button>    <button id="Geeks3">Down        <i class="fa fa-arrow-down"></i>    </button>    <button id="Geeks4">Left        <i class="fa fa-arrow-left"></i>    </button>      </body>  </html>
Output:
arrow keys
CSS-Properties
CSS-Questions
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
Build a Survey Form using HTML and CSS
Design a web page using HTML and CSS
Form validation using jQuery
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array