Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

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

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.
  • The 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: In this example, we are using the above-explained approach.

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href=
    <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


My Personal Notes arrow_drop_up
Last Updated : 16 May, 2023
Like Article
Save Article
Similar Reads
Related Tutorials