up.feedback [up-nav]

HTML selector

Marks this element as a navigation component, 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.

You may also assign [up-nav] to an individual link instead of an navigational container.

Standard <nav> elements are always navigational containers and do not need an [up-nav] attribute. You can configure additional selectors to automatically match your navigation components in up.feedback.config.navSelectors.

Example

Let's take a simple menu with two links. The menu has been marked with the [up-nav] attribute:

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

If 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>
  <a href="/bar">Bar</a>
</div>

If the browser location changes to /bar, the first link automatically 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>
</div>

When is a link "current"?

When no overlay is open, the current location is the URL displayed in the browser's address bar. When the link in question is placed in an overlay, the current location is the location of that overlay, even if that overlay doesn't have visible history.

A link matches the current location (and is marked as .up-current) if it matches either:

• the link's [href] attribute
• the link's [up-href] attribute
• the URL pattern in the link's [up-alias] attribute

Any #hash fragments in the link's or current URLs will be ignored.