Open In App

CSS nav-right property

Improve
Improve
Like Article
Like
Save
Share
Report

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 properties. 

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. The below example illustrates the property.

Example 1: In this example, we are using the above-explained method.

html




<!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>
</body>
</html>


Output: 

Supported Browsers: The major browsers are not supported by CSS nav-right property.

Browsers Specific Extension: The css nav-right property has browsers specific extension.

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


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