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

# [up-anchored=right]

Marks this element as being anchored to the right edge of the screen, like a fixed navigation bar.

Since [overlays](https://unpoly.com/api/up.layer.md) hide the document scroll bar, elements anchored to the right appear to jump when an overlay opens or closes. Applying this attribute to anchored elements will make Unpoly aware of the issue and adjust the `right` property accordingly. You may customize this behavior by styling the [`.up-scrollbar-away`](https://unpoly.com/api/up-scrollbar-away.md) class.

Instead of applying this attribute to each affected element, you can also configure a selector in [`up.viewport.config.anchoredRightSelectors`](https://unpoly.com/api/up.viewport.config.md#config.anchoredRightSelectors).

> <nav aria-label="Guides">
>
> - [Learn: Overlays](https://unpoly.com/learn/overlays.md)
>
> </nav>
>
> #### Note
>
> Elements with [`[up-fixed=top]`](https://unpoly.com/api/up-fixed-top.md) or [`[up-fixed=bottom]`](https://unpoly.com/api/up-fixed-bottom.md) are also considered to be right-anchored.

## Example {#example}

Here is the CSS for a navigation bar that is anchored to the top edge of the screen:

```css
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
```

By adding an `up-anchored="right"` attribute to the element, we can prevent the `right` edge from jumping when an [overlay](https://unpoly.com/api/up.layer.md) opens or closes:

```html
<div class="top-nav" up-anchored="right">...</div>
```