Skip to content
Related Articles

Related Articles

CSS | nav-right property

View Discussion
Improve Article
Save Article
  • Last Updated : 07 Nov, 2019
View Discussion
Improve Article
Save Article

The CSS nav-right property is used to navigate through the navigation key from the keyboard. This property defines where to focus when the user is navigating by using the navigation key. The nav-right can be used with the nav-left, nav-up and nav-down property.

Syntax:

 nav-right: auto | id | target-name | initial | inherit;

Attribute:

  • auto: It is the by default value here the browsers define which element to navigate.
  • <id>: It defines the id to navigate.
  • <target-name>: It defines the target to navigate.
  • initial: It is the default value.
  • inherit: It inherits from its parent element.

Note: Only Opera 12.0 is supported by this property.

Below example illustrate the property:
Example 1:




<!DOCTYPE html>
<html>
  
<head>
    <title>CSS nav-right Property</title>
    <link rel="stylesheet" href=
    <style>
        button {
            position: absolute;
        }
          
        h1 {
            color: green;
        }
          
        button {
            background-color: #80ff80;
            nav-right: auto;
            nav-left: auto;
            nav-down: auto;
            nav-up: auto;
            border-radius: 25px;
            font-size: 20px;
        }
          
        #Geeks1 {
            top: 35%;
            left: 43%;
            nav-index: 1;
        }
          
        #Geeks2 {
            top: 50%;
            left: 65%;
            nav-index: 2;
        }
          
        #Geeks3 {
            top: 65%;
            left: 43%;
            nav-index: 3;
        }
          
        #Geeks4 {
            top: 50%;
            left: 20%;
            nav-index: 4;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h4>CSS nav-right Property</h4>
        <p>
            Press the <samp>Shift</samp
          key while navigating with the arrow keys.
        </p>
    </center>
    <button id="Geeks1">Button
        <i class="fa fa-arrow-circle-up"></i>
    </button>
    <button id="Geeks2">Button
        <i class="fa fa-arrow-circle-right"></i>
    </button>
    <button id="Geeks3">Button
        <i class="fa fa-arrow-circle-down"></i>
    </button
    <button id="Geeks4">Button
        <i class="fa fa-arrow-circle-left"></i>
    </button>
  
    <div>
  
    </div>
</body>
  
</html>

Output:

Supported Browsers: The major browsers are not supported by CSS nav-right property
Browsers Specific Extension: The css nav-right perperty has browsers specific extension.

  • Google Chrome -webkit-
  • Internet Explorer -ms-
  • Firefox -moz-
  • Safari -webkit-
  • Opera -webkit-

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!