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

# .up-current

When a link within a [navigational container](https://unpoly.com/learn/navigation-bars.md) points to the current location, it is assigned the `.up-current` class.

<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
<nav>
  <a href="/foo">Foo</a>
  <a href="/bar">Bar</a>
</nav>
```

When the browser location changes to `/foo`, the first link is automatically marked as `.up-current`:

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

Unpoly doesn't style `.up-current` links by default, but we can [style highlighted links](https://unpoly.com/learn/navigation-bars.md#styling) using CSS.

When the browser location changes to `/bar`, the first link loses its `.up-current` class.
Now the second link is automatically marked as `.up-current`:

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