---
title: "ref.asAnchor()"
description: "Make the element that has a ref a named anchor for CSS anchor positioning."
image: "https://stillwind.dev/og.png"
---

> Documentation Index
> Fetch the complete documentation index at: https://stillwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# ref.asAnchor()

`trigger.asAnchor(scope?)` sets `anchor-name` on the element. Position another
element against it with [`trigger.positionAnchor()`](/docs/macros/ref/position-anchor).

## Example

### Source

```tsx
import { style } from "stillwind/react";

const trigger = style.ref("trigger");
export const button = style(trigger, trigger.asAnchor());
export const popover = style("absolute", trigger.positionAnchor(), "top-[anchor(bottom)]");
```

### Compiled code

```ts
const trigger = undefined;
export const button = {className:"sw_l9spr sw_trigger_xnn7w"};
export const popover = {className:"sw_mqosh"};
```

### Generated CSS


```css
.sw_l9spr:where(.sw_trigger_xnn7w) {
  anchor-name: --sw-a-trigger-xnn7w;
}

.sw_mqosh {
  position-anchor: --sw-a-trigger-xnn7w;
  position: absolute;
  top: anchor(bottom);
}
```

## Inputs

The optional scope also sets `anchor-scope` on the element:

| Scope            | Effect                                             |
| ---------------- | -------------------------------------------------- |
| Omitted          | Sets no `anchor-scope`                             |
| `"all"`          | Limits every anchor name to this element's subtree |
| `"none"`         | Sets `anchor-scope: none`                          |
| An array of refs | Limits the anchor names of those refs              |

Write the array directly in the call. The array includes the `trigger` ref only
when you list it. An empty array sets nothing, and
[ineffective-anchor-scope](/docs/lints/ineffective-anchor-scope) reports it.

## Behavior

Pass `trigger` and `trigger.asAnchor()` in the same `style()` call. The anchor
name applies only to an element that has the ref, and
[missing-ref-attachment](/docs/lints/missing-ref-attachment) reports a call
without it.

To limit the anchor name from an ancestor instead, use
[style.anchorScope()](/docs/macros/anchor-scope). Stillwind generates CSS only,
so check that the browsers you support implement anchor positioning.

Source: https://stillwind.dev/docs/macros/ref/as-anchor/index.mdx