CSS nav-right property

Last Updated : 09 Jun, 2023

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=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <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-

CSS nav-left property

skyridetim

Improve

Article Tags :

CSS nav-right property

html

Similar Reads

Thank You!

What kind of Experience do you want to share?