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-down property
The CSS nav-down property defines which element should receive focus when the user presses the down arrow key. This property is part of CSS spatial navigation, designed primarily for TV remotes and game controllers where users navigate using directional keys.
Syntax
selector {
nav-down: target;
}
Possible Values
| Value | Description |
|---|---|
auto |
Browser determines the next element (default) |
id |
ID of the element to focus when down arrow is pressed |
inherit |
Inherits the value from parent element |
Example: Creating Navigation Grid
The following example creates a grid of buttons where pressing the down arrow key moves focus to specific elements −
<!DOCTYPE html>
<html>
<head>
<style>
button {
position: absolute;
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
}
button:focus {
background-color: #45a049;
outline: 2px solid #333;
}
button#btn1 {
top: 10%;
left: 15%;
nav-index: 1;
nav-down: #btn2;
nav-right: #btn3;
}
button#btn2 {
top: 40%;
left: 15%;
nav-index: 2;
nav-up: #btn1;
nav-down: #btn4;
nav-right: #btn3;
}
button#btn3 {
top: 10%;
left: 45%;
nav-index: 3;
nav-down: #btn4;
nav-left: #btn1;
}
button#btn4 {
top: 40%;
left: 45%;
nav-index: 4;
nav-up: #btn3;
nav-left: #btn2;
}
</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 arranged in a 2x2 grid. When using directional keys (on supported devices), pressing the down arrow moves focus from Button 1 to Button 2, and from Button 3 to Button 4.
Browser Support
Note: The nav-down property has limited browser support and is primarily designed for devices with directional navigation like smart TVs and game consoles. Most desktop browsers do not support spatial navigation properties.
Conclusion
The nav-down property enables custom navigation paths for directional key input. While support is limited, it's essential for creating accessible interfaces on TV and gaming platforms.
265 Views
