トリガーボタンに追従するドロップダウンメニュー

セットアップ

ドロップダウンはアンカーポジショニングの典型的なユースケースです：上にトリガーボタン、メニューパネルがその左下角から開きます。

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

.menu-panel {
  position: absolute;
  position-anchor: --menu-1;
  position-area: bottom-start;
  margin-top: 4px;
  min-width: anchor-size(width); /* トリガー幅にマッチ */

  /* ビューポート端でグレースフルに回復 */
  position-try-fallbacks:
    flip-block,            /* 上向きを試す */
    flip-inline,           /* 右向きを試す */
    flip-block flip-inline; /* 上 AND 右を試す */
}

anchor-size(width)

anchor-size() 関数はアンカー要素のサイズを返します。min-width: anchor-size(width) を指定すると、ドロップダウンパネルがトリガーと同じ幅以上になります — select 風ドロップダウンの定番動作です。anchor-size(height) でアンカーの高さに合わせることもできます。

position-area: bottom-start のセマンティクス

bottom は「アンカーの下」、start は「インライン軸の始端に揃える」（LTRなら左、RTLなら右）を意味します。つまり bottom-start はメニューの左上角をアンカーの左下角に合わせます。比較：

• bottom-end — メニューの右上角をアンカーの右下角に（右揃えドロップダウン）
• bottom — アンカーの下に水平方向の中央揃え（メニューでは稀）

フォールバックの順序が重要

ブラウザはフォールバックを 順番に 試して、はみ出さずに収まる最初のものを採用します。上の順序（flip-block → flip-inline → 両方）は垂直方向の反転を優先します（下に入らないメニューはサイドではなく上に開くべき）。サイドバーメニューでは順序を逆にして水平反転を優先するのが自然です。

4px のギャップ

margin-top: 4px でトリガーとメニューの間に小さな視覚的隙間を作ります。0だとホバー状態が引っかかる感じになるので避けてください。