Navigation feedback [up-nav] 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 the current 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.

If you don't want to manually add this attribute to every navigational element, you can configure selectors to automatically match your navigation components in up.feedback.config.navs.

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>

What is considered to be "current"?

The current location is considered to be either:

• the URL displayed in the browser window's location bar
• the source URL of a modal dialog
• the URL of the page behind a modal dialog
• the source URL of a popup overlay
• the URL of the content behind a popup overlay

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
• a space-separated list of URLs in the link's up-alias attribute

Matching URL by prefix

You can mark a link as .up-current whenever the current URL matches a prefix. To do so, end the up-alias attribute in an asterisk (*).

For instance, the following [up-nav] link is highlighted for both /reports and /reports/123:

<a up-nav href="/reports" up-alias="/reports/*">Reports</a>