Popover API ＋ Anchor Positioning ＋ position-try-fallbacks で JS なしドロップダウン

どんな時に使う？

• ヘッダーのユーザーメニュー、サブメニュー、ツールチップ的なメニューなど。
• 以前は「開閉は Popover API、位置計算は JS」だったが、Anchor Positioning が全ブラウザ対応（2026年1月、Firefox 147）したことで JS が不要になった。

コード

<button class="trigger" commandfor="menu" command="toggle-popover">メニュー</button>
<div id="menu" popover class="menu">…</div>

.trigger { anchor-name: --menu-btn; }

.menu {
  position-anchor: --menu-btn;
  position-area: block-end;          /* アンカーの下に表示 */
  margin-block-start: 8px;
  position-try-fallbacks: flip-block; /* 下にはみ出すなら上に反転 */
}

/* 右端のアイコンから出すメニューは、右端揃えで画面外に出さない */
.menu--right {
  position-area: none;
  top: anchor(bottom);
  right: anchor(right);
}

• flip-block（上下反転）/ flip-inline（左右反転）/ 両方 を指定できる。
• commandfor / command は popovertarget の後継（Invoker Commands）。<button> でのみ動く。

注意点・対応状況

• Anchor Positioning: Chrome/Edge 125+、Safari 26+、Firefox 147+。
• position-area: block-end inline-end は「右下エリア」配置なので、右端揃えにはならない点に注意（右端揃えは anchor() で）。
• ESC で閉じる・外側クリックで閉じる・フォーカス管理は popover が自動でやってくれる。

出典

• @tonkotsuboy_com · 2026-04-07 （Zenn 記事: zenn.dev ）