Edit this page

up.status .up-current
HTML selector

When a link within a navigational container points to the current location, it is assigned the .up-current class.

See Navigation bars for more documentation and examples.

Example

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

<nav> <!-- mark: up-nav -->
  <a href="/?originalUrl=https%3A%2F%2Funpoly.com%2Ffoo">Foo</a>
  <a href="/?originalUrl=https%3A%2F%2Funpoly.com%2Fbar">Bar</a>
</nav>

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

<nav>
  <a href="/?originalUrl=https%3A%2F%2Funpoly.com%2Ffoo" class="up-current">Foo</a> <!-- mark: up-current -->
  <a href="/?originalUrl=https%3A%2F%2Funpoly.com%2Fbar">Bar</a>
</nav>

Unpoly doesn't style .up-current links by default, but we can style highlighted links 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:

<nav>
  <a href="/?originalUrl=https%3A%2F%2Funpoly.com%2Ffoo">Foo</a>
  <a href="/?originalUrl=https%3A%2F%2Funpoly.com%2Fbar" class="up-current">Bar</a> <!-- mark: up-current -->
</nav>