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.

Example

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

<div up-nav> <!-- mark-phrase "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> <!-- mark-phrase "up-current" -->
  <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> <!-- mark-phrase "up-current" -->
</div>

Marking navigational containers

The [up-nav] attribute can be assigned to any container that contains links:

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

Standard <nav> elements are always navigational containers and do not need an [up-nav] attribute:

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

You can configure additional selectors to automatically match your navigation components in up.feedback.config.navSelectors.

Matching containers can opt out of .up-current assignment by setting an [up-nav=false] attribute:

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

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

<a href="/foo" up-nav>Foo</a> <!-- mark-phrase "up-nav" -->

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.

Updating .up-current classes

The .up-current class is toggled automatically within all content that Unpoly renders. For example, when Unpoly follows a link, submits a form or renders from a script, any newly inserted hyperlinks will get .up-current if they point to the current URL.

To toggle .up-current on content that you manually inserted without Unpoly, use up.hello().