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

# up:link:follow

This event is [emitted](https://unpoly.com/api/up.emit.md) when a link is [followed](https://unpoly.com/api/up.follow.md) through Unpoly.

The event is emitted on the `<a>` element that is being followed.

<nav aria-label="Guides">

- [Learn: Following links](https://unpoly.com/learn/following-links.md)

</nav>

## Changing render options {#changing-render-options}

Listeners may inspect and manipulate [render options](https://unpoly.com/api/up.render.md#parameters) for the coming fragment update.

The code below will open all form-contained links in an overlay so as not to lose the user's form data:

```js
up.on('up:link:follow', function(event, link) {
  if (link.closest('form')) {
    event.renderOptions.layer = 'new modal'
  }
})
```

When changing render options for a [preloaded link](https://unpoly.com/learn/preloading.md), consider making the same change for [`up:link:preload`](https://unpoly.com/api/up:link:preload.md) so the [preload request](https://unpoly.com/learn/preloading.md#preload-request-behavior) sends the same [HTTP headers](https://unpoly.com/api/up.protocol.md).

In the example above, we want to ensure an `X-Up-Mode: modal` header is sent, so we modify both events:

```js
up.on('up:link:follow up:link:preload', function(event, link) {
  if (link.closest('form')) {
    event.renderOptions.layer = 'new modal'
  }
})
```

---

## Event properties {#properties}

### event.target {#event.target}

(required)

The link element that will be followed.

Type: [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)

### event.renderOptions {#event.renderOptions}

(required)

An object with [render options](https://unpoly.com/api/up.render.md#parameters) for the coming fragment update.

Listeners may inspect and modify these options. It is recommended that render options for [`up:link:preload`](https://unpoly.com/api/up:link:preload.md) be changed in the same way.

Type: [Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects)

### event.preventDefault() {#event.preventDefault}

(required)

Prevents the link from being followed.