Anchor Plugin (x-anchor)

Position an element relative to another – like floating menus and tooltips.

Anchor Plugin

The @alpinejs/anchor plugin provides the x-anchor directive, which uses Popper.js to position a floating element (like a dropdown or tooltip) relative to a reference element. It handles edge cases like viewport collisions and resizing automatically.

Installation

Code

npm install @alpinejs/anchor

import anchor from '@alpinejs/anchor'
Alpine.plugin(anchor)

Basic Example

Code

<div x-data="{ open: false }">
  <button id="trigger" @click="open = !open">Menu</button>
  <div x-anchor="#trigger" x-show="open" @click.outside="open = false" class="absolute bg-white shadow-lg p-4">
    Dropdown content
  </div>
</div>

Offset and Placement

You can specify offset and placement with modifiers.

Code

<div x-anchor.offset.10="#trigger"> <!-- 10px offset -->
<div x-anchor.bottom-start="#trigger"> <!-- open below, aligned to left -->

💡 Tip

Always add @click.outside or @click.away (from the anchor plugin) to close the floating element when clicking outside.

Helpful? Share this page!↑ Back to top