---
name: "[up-nav]"
area: "API"
kind: "HTML attribute"
parent: "up.status module"
url: "https://unpoly.com/api/up-nav"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.status module](https://unpoly.com/api/up.status.md)</nav>

# [up-nav]

Marks this element as a [navigational container](https://unpoly.com/learn/navigation-bars.md), such as a menu or navigation bar.

When a link within an `[up-nav]` element points to [its layer's location](https://unpoly.com/api/up.layer.location.md), it is assigned the [`.up-current`](https://unpoly.com/api/up-current.md) class. When the browser navigates to another location, the class is removed automatically.

<nav aria-label="Guides">

- [Learn: Navigation bars](https://unpoly.com/learn/navigation-bars.md)

</nav>

## Example {#example}

Let's look at a simple menu with two links:

```html
<div up-nav>
  <a href="/foo">Foo</a>
  <a href="/bar">Bar</a>
</div>
```

When the browser location changes to `/foo`, the first link is marked as [`.up-current`](https://unpoly.com/api/up-current.md):

```html
<div up-nav>
  <a href="/foo" class="up-current">Foo</a>
  <a href="/bar">Bar</a>
</div>
```

When the browser location changes to `/bar`, the first link loses its [`.up-current`](https://unpoly.com/api/up-current.md) class. Now the second link is marked as [`.up-current`](https://unpoly.com/api/up-current.md):

```html
<div up-nav>
  <a href="/foo">Foo</a>
  <a href="/bar" class="up-current">Bar</a>
</div>
```

---

## Modifying attributes {#attributes}

### [up-layer="origin"] {#up-layer}

(optional)

The [layers](https://unpoly.com/api/up.layer.md) for which to match link locations.

By default, links are only marked as current when they point to the location _of their own layer_. To highlight links that point to the location of _another_ layer, set this attribute to any [layer option](https://unpoly.com/learn/targeting-other-layers.md).

If the configured option matches multiple layers (e.g. `any` or `current, root`), links are highlighted if they match the location of any matching layer.

See [Matching the location of other layers](https://unpoly.com/learn/navigation-bars.md#layers) for examples.