Edit this page

API Navigation feedback
module up.feedback

The up.feedback module adds useful CSS classes to fragments while they are loading over the network.

By styling these classes you can provide instant feedback to user interactions, improving the perceived speed of your interface.

Example

Let's say we have an <nav> element with two links, pointing to /foo and /bar respectively:

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

By giving the navigation bar the [up-nav] attribute, links pointing to the current browser address are highlighted as we navigate through the site.

While the current URL is /foo, the first link is automatically marked with an .up-current class. We also assign an [aria-current] attribute to convey the highlighted link to assistive technologies:

<nav up-nav>
  <a href="/foo" up-follow class="up-current" aria-current="page">Foo</a>
  <a href="/bar" up-follow>Bar</a>
</nav>

When the user clicks on the /bar link, the link will receive the .up-active class while it is waiting for the server to respond. The targeted fragment (the <main> element) gets the .up-loading class:

<nav up-nav>
  <a href="/foo" up-follow class="up-current" aria-current="page">Foo</a>
  <a href="/bar" up-follow class="up-active">Bar</a>
</div>

<main class="up-loading">
  Foo content
</main>

Once the response is received the .up-active and .up-loading classes are removed. Since the new URL is /bar, the .up-current class has been moved to the "Bar" link.

<nav up-nav>
  <a href="/foo" up-follow>Foo</a>
  <a href="/bar" up-follow class="up-current" aria-current="page">Bar</a>
</nav>

<main>
  Bar content
</main>

Enabling navigation feedback

Navigation feedback is enabled per default when navigating.

When rendering without navigation, you may enable feedback by setting an [up-feedback] attribute or by passing a { feedback } option:

up.render('.preview', { url: '/preview', feedback: true })

When watching fields you may show navigation feedback while an async callback is running.


Features

Essentials

All features

HTML
.up-active stable

While rendering with navigation feedback, the .up-active class is added to the origin element that triggered the change.

HTML
[up-alias] stable

Links within [up-nav] may use the [up-alias] attribute to pass a URL pattern for which they should also be highlighted as .up-current.

HTML
.up-current stable

When a link within an [up-nav] element points to the current location, it is assigned the .up-current class.

JS
up.feedback.config stable

Sets default options for this package.

HTML
.up-loading stable

While rendering with navigation feedback, targeted fragments are assigned the .up-loading class.

HTML
[up-nav] stable

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