Anchored placement

Preview Available in release assets

Place native popover content near an explicit anchor with browser collision fallback and a durable in-flow destination.

Anchored placement primary example

<section class="thin-anchored-placement" aria-labelledby="placement-title">
  <h2 id="placement-title">Account actions</h2>
  <p><button class="thin-button" id="account-actions-trigger" popovertarget="account-actions" style="anchor-name:--account-actions">Open account actions</button></p>
  <nav id="account-actions" popover data-anchored style="position-anchor:--account-actions" aria-label="Account actions">
    <a href="/account/profile">Profile</a>
    <a href="/account/security">Security</a>
    <form action="/session" method="post">
      <input type="hidden" name="intent" value="sign-out">
      <button>Sign out</button>
    </form>
  </nav>
  <p><a href="/account">Open the full account page</a></p>
</section>

Show code

<section class="thin-anchored-placement" aria-labelledby="placement-title">
  <h2 id="placement-title">Account actions</h2>
  <p><button class="thin-button" id="account-actions-trigger" popovertarget="account-actions" style="anchor-name:--account-actions">Open account actions</button></p>
  <nav id="account-actions" popover data-anchored style="position-anchor:--account-actions" aria-label="Account actions">
    <a href="/account/profile">Profile</a>
    <a href="/account/security">Security</a>
    <form action="/session" method="post">
      <input type="hidden" name="intent" value="sign-out">
      <button>Sign out</button>
    </form>
  </nav>
  <p><a href="/account">Open the full account page</a></p>
</section>

Anatomy

Explicit native trigger
Named anchor
Native popover
Semantic links/forms
Durable full-page fallback

Variants and sizes

Block and inline anchors
Viewport edge
Narrow container
RTL
Long localized content

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

In flow fallback
Open
Closed
Viewport collision
Scrolled anchor
400% zoom
RTL
Forced colors
Print

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

The native popover trigger owns activation, Escape dismissal, light dismiss, and focus return. CSS anchor positioning is optional presentation; links/forms and the full-page destination remain canonical.

Accessibility

Use an explicit labelled trigger, a semantically named popover region, native links/forms, logical positioning, visible focus, and a durable full-page fallback. Never depend on proximity alone to convey ownership.

Contract

PLATFORM

Basis

Native DOM/source order with positioned layout; no APG widget

Evidence

tests/unit/library/anchored-placement.test.ts

API

Give the trigger anchor-name and the popover matching position-anchor. data-anchored supplies logical placement and position-try fallbacks; native popover remains usable when anchor positioning is unavailable.

Behavior tier: native

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Without advanced positioning CSS, authored content remains readable in flow; native popover, links, forms, and durable destinations retain their browser behavior.

Assets and dependencies

/layouts.css
/components.css

Dependencies: None

Source: packages/ui/src/style/layouts.ts

Composition

Derived from the examples and style specs, not authored.

Composes

Button