Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 16 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads