up.status [up-alias]

HTML selector

Links within navigational containers may use the [up-alias] attribute to define alternative URLs for which they should also be highlighted as .up-current.

See Highlighting links for multiple URLs for more documentation.

Example

The link below will be highlighted with .up-current at both /profile and /profile/edit locations:

<nav>
  <a href="/profile" up-alias="/profile/edit">Profile</a>
</nav>

To configure multiple alternative URLs, use a URL pattern.

Setting URL aliases from macros

An [up-alias] attribute can be set by a macro.

This can be useful to link nested navigation trees programmatically.
Let's say we have a main navigation linking to two sections:

<nav class="main-nav">
  <a href="/companies" data-section="companies"> <!-- mark: data-section="companies"-->
  <a href="/users" data-section="users"> <!-- mark: data-section="users"-->
</nav>

We also have a sub-navigation for each section:

<nav class="sub-nav" data-section="companies"> <!-- mark: data-section="companies"-->
  <a href="/companies">All companies</a>
  <a href="/companies/sync">Sync CRM</a>
  <a href="/companies/export">Export</a>
</nav>

<nav class="sub-nav" data-section="users"> <!-- mark: data-section="users"-->
  <a href="/users">All users</a>
  <a href="/users/online">Now online</a>
  <a href="/users/profile">Your profile</a>
</nav>

We want the main navigation section to be .up-current for any sub-section URL. We can do that with a macro that finds the respective sub-navigation, and sets an [up-alias] attribute at the main navigation link:

up.macro('.main-nav a', function(link, { section }) {
  let subLinks = document.querySelectorAll(`.sub-nav[data-section="${section}"]`)
  let subURLs = up.util.map(subLinks, 'href')
  link.setAttribute('up-alias', subURLs.join())
})