Edit this page

up.status [up-nav]
HTML selector

Marks this element as a navigational container, such as a menu or navigation bar.

When a link within an [up-nav] element points to its layer's location, it is assigned the .up-current class. When the browser navigates to another location, the class is removed automatically.

See Navigation bars for details and examples.

Example

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

<div up-nav> <!-- mark: 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:

<div up-nav>
  <a href="/foo" class="up-current">Foo</a> <!-- mark: up-current -->
  <a href="/bar">Bar</a>
</div>

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

<div up-nav>
  <a href="/foo">Foo</a>
  <a href="/bar" class="up-current">Bar</a> <!-- mark: up-current -->
</div>

Modifying attributes

[up-layer="origin"]
optional

The layers for which to match link locations.

By default, links are only marked as current when they point to location of their own layer. To highlight links that point to the location of another layer, set this attribute to any layer option.

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 for examples.