---
name: "[up-alias]"
area: "API"
kind: "HTML attribute"
parent: "up.status module"
url: "https://unpoly.com/api/up-alias"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.status module](https://unpoly.com/api/up.status.md)</nav>

# [up-alias]

Links within [navigational containers](https://unpoly.com/learn/navigation-bars.md) may use the `[up-alias]` attribute to define alternative URLs for which they should also be highlighted as [`.up-current`](https://unpoly.com/api/up-current.md).

<nav aria-label="Guides">

- [Learn: Navigation bars](https://unpoly.com/learn/navigation-bars.md#aliases)

</nav>

<nav aria-label="Contents">

#### Contents

- [Example](#example)
- [Setting URL aliases from macros](#from-macro)
- [Modifying attributes](#attributes)

</nav>

## Example {#example}

The link below will be highlighted with [`.up-current`](https://unpoly.com/api/up-current.md) at both `/profile` and `/profile/edit` locations:

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

To configure multiple alternative URLs, use a [URL pattern](https://unpoly.com/api/url-patterns.md).

## Setting URL aliases from macros {#from-macro}

An `[up-alias]` attribute can be set by a [macro](https://unpoly.com/api/up.macro.md).

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

```html
<nav class="main-nav">
  <a href="/companies" data-section="companies">Companies</a>
  <a href="/users" data-section="users">Users</a>
</nav>
```

We also have a sub-navigation for each section:

```html
<nav class="sub-nav" 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">
  <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`](https://unpoly.com/api/up-current.md) 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:

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

---

## Modifying attributes {#attributes}

### up-alias {#up-alias}

(required)

A [URL pattern](https://unpoly.com/api/url-patterns.md) with alternative URLs.