Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
CSS nav-left property
The CSS nav-left property defines which element to focus on when the user presses the left arrow key on their keyboard or remote control. This property is primarily designed for TV browsers and devices where navigation is done using directional keys rather than a mouse.
Syntax
selector {
nav-left: target-element;
}
Possible Values
| Value | Description |
|---|---|
#id |
ID of the element to navigate to when left key is pressed |
auto |
Browser determines the next element automatically |
Example
The following example creates a navigation system where pressing the left arrow key moves focus between buttons −
<!DOCTYPE html>
<html>
<head>
<style>
button {
position: absolute;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: 2px solid transparent;
cursor: pointer;
}
button:focus {
border-color: #ff0000;
outline: none;
}
button#btn1 {
top: 10%;
left: 15%;
nav-index: 1;
nav-right: #btn2;
nav-left: #btn4;
nav-down: #btn3;
nav-up: #btn4;
}
button#btn2 {
top: 10%;
left: 40%;
nav-index: 2;
nav-right: #btn3;
nav-left: #btn1;
nav-down: #btn4;
nav-up: #btn3;
}
button#btn3 {
top: 30%;
left: 40%;
nav-index: 3;
nav-right: #btn4;
nav-left: #btn2;
nav-down: #btn1;
nav-up: #btn2;
}
button#btn4 {
top: 30%;
left: 15%;
nav-index: 4;
nav-right: #btn1;
nav-left: #btn3;
nav-down: #btn2;
nav-up: #btn1;
}
</style>
</head>
<body>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>
<button id="btn4">Button 4</button>
</body>
</html>
Four green buttons are positioned in a square layout. When using keyboard navigation (arrow keys), pressing the left key moves focus to the element specified by nav-left property. Focused buttons display a red border.
Browser Support
The nav-left property has very limited browser support and is primarily intended for TV browsers and Opera. Most modern desktop browsers do not support these navigation properties.
Note: This property is part of the CSS3 specification but is not widely supported. It was mainly designed for device navigation in TV browsers and similar environments where directional key navigation is primary.
Conclusion
The nav-left property provides directional navigation control for keyboard-based interfaces. While not widely supported in modern browsers, it offers a way to create custom navigation flows for specialized environments and devices.
241 Views
