Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

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

  • Last Updated : 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=
    <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
Recommended Articles
Page :