YouTipfocus button navigation
```
(
### Related Topics
(
(
(
( (
(
( | ( | ( | ( | (
© Copyright 2012-2025, . All Rights Reserved. Email: service@Css3 Pr Nav Up
## CSS3 nav-up Property
### Definition and Usage
The nav-up property specifies the element to navigate to when the user presses the up arrow key while focusing on the navigation element.
**Note:** The nav-up property is only supported in Opera 12, but Internet Explorer and Chrome/Safari (WebKit) do not yet support this feature.
**Tip:** The CSS3 navigation properties (nav-up, nav-right, nav-down, nav-left) allow you to configure keyboard navigation using arrow keys, similar to how navigation works in games. For example, pressing the arrow keys can help users navigate between elements without using the mouse.
### Browser Support
The numbers in the table indicate the first browser version that fully supports the property.
| Property | | | | | |
|----------|------|------|------|------|------|
| nav-up | Not supported | Not supported | Not supported | Not supported | 12.0 |
### CSS Syntax
```css
nav-up: auto | | inherit
```
### Property Values
| Value | Description |
|-------|-------------|
| auto | Default. If the specified element is not found, the browser will determine the navigation target. |
| | The id of the target element to navigate to. |
| inherit | Specifies that the nav-up property should be inherited from the parent element. |
### Example
In this example, we will demonstrate how to use the nav-up property. When you press the up arrow key while focusing on the second button, the page will navigate to the button with id="button1".
```html
button#b1 {
top: 0;
left: 0;
position: absolute;
}
button#b2 {
top: 0;
left: 150px;
position: absolute;
}
#w3r {
top: 250px;
font-size: 20px;
color: green;
}