---
area: "Learn"
parent: "Advanced rendering chapter"
url: "https://unpoly.com/learn/attributes-and-options"
---
# Attributes and options
Most of Unpoly's features share one shape: the common case is an HTML attribute, the same feature is also available as a JavaScript function, and its defaults can be changed through a global configuration.
This page covers the pattern in detail: how attributes and their modifiers are parsed, which values they accept, and how JavaScript options and configured defaults override them.
## One option, three places {#places}
You can set most options in three places: a [configuration default](#config) for your entire app, an attribute on one element, or an [option](#options) in one JavaScript call. When more than one place sets the same option, the most specific one wins.
Let's say your app animates every navigation with a cross-fade:
```js
up.fragment.config.navigateOptions.transition = 'cross-fade'
```
One link prefers to slide in from the right. Its attribute overrides the default for this link only:
```html
Next page
```
When your own script follows that link, it can override the attribute again. Here the script skips the animation altogether:
```js
up.follow(link, { transition: 'none' })
```
When Unpoly navigates, it starts with the [configured defaults](https://unpoly.com/learn/navigation-defaults.md), then applies the attributes it parsed from the element, and finally the options you passed. Each place only replaces the values it actually sets, so the script above still gets the link's URL and every other attribute.
## Unpoly attributes {#unpoly-attributes}
Unpoly provides `up-`prefixed attributes that enable additional behavior on HTML elements. For example, the [`[up-follow]`](https://unpoly.com/api/up-follow.md) attribute will cause a clicked link to swap the page's [main fragment](https://unpoly.com/api/main.md) instead of replacing the full page:
```html
Click me
```
### Modifying attributes {#attributes}
Most Unpoly attributes have _modifying attributes_ to fine-tune their behavior. For example, the `[up-confirm]` attribute makes an [`[up-follow]`](https://unpoly.com/api/up-follow.md) link show a confirmation dialog before it is followed:
```html
Delete user
```
Modifying attributes are documented with the main attribute they're modifying. For example, see [modifying attributes for `[up-follow]`](https://unpoly.com/api/up-follow.md#attributes).
### Boolean attributes {#boolean-attributes}
Most Unpoly attributes can be enabled with a value `"true"` and be disabled with a value `"false"`:
```html
Click for single-page navigationClick for full page load
```
Instead of setting a `true` value you can also set an empty value:
```html
Click for single-page navigationClick for single-page navigationClick for single-page navigation
```
Boolean values can be helpful with a server-side templating language like ERB, Liquid or Haml, when the attribute value is set from a boolean variable:
```erb
Click me <%
```
This can also help when you're generating HTML from a different programming language and want to pass a `true` literal as an attribute value:
```ruby
link_to 'Click me', '/path', 'up-follow': true
```
The examples use Ruby on Rails, but work similarly with any other backend.
### Structured values {#relaxed-json}
A few attributes take a structured value, like an object or an array. These values are written in [relaxed JSON](https://unpoly.com/api/relaxed-json.md), which allows single quotes and unquoted keys:
```html
Click me
```
## Overriding attributes with JavaScript options {#options}
Most Unpoly attributes come with matching JavaScript functions that trigger the same behavior programmatically.
Let's say you have the following link:
```html
Click me
```
Your scripts can tell Unpoly to follow the link like this:
```js
up.follow(link)
```
The [`up.follow()`](https://unpoly.com/api/up.follow.md) call will parse all modifying attributes from the given link element into a JavaScript object with camel-cased keys. So we're implicitly making the following call:
```js
// The options object is parsed from the link and can be omitted
up.follow(link, { url: '/path', metaTags: false })
```
If you pass other options, these will override (or supplement) any options parsed from the link's attributes:
```js
// This overrides the [up-meta-tags=false] attribute
up.follow(link, { metaTags: true })
```
## Changing defaults globally {#config}
Most modules have an `up.*.config` property that adjusts their behavior for your entire application. For example, this makes every new overlay open as a drawer instead of a modal:
```js
up.layer.config.mode = 'drawer'
```
A configured value becomes the new default. Elements and function calls can still override it with their own attributes and options.
Many config properties hold a list of CSS selectors, letting you apply a behavior to all matching elements. For example, you can tell Unpoly to [handle every link on the page](https://unpoly.com/learn/handling-all-links.md#following-all-links) without any [`[up-follow]`](https://unpoly.com/api/up-follow.md) attributes.
## Auto-attributes {#auto-attributes}
Some attributes default to a value `"auto"`. This indicates a more complex default.
For example, the [`[up-cache=auto]`](https://unpoly.com/api/up-follow.md#up-cache) attribute caches all links with a `GET` method:
```html
Click me
```
You can usually configure auto-behavior. For example, the following will prevent auto-caching of requests to URLs ending with `/edit`:
```js
let defaultAutoCache = up.network.config.autoCache
up.network.config.autoCache = function(request) {
return defaultAutoCache(request) && !request.url.endsWith('/edit')
}
```