Alap uses a compass-based placement engine with three strategy levels. The placement attribute is a comma-separated string: compass direction + strategy.
The placement attribute takes a compass direction and an optional strategy, separated by a comma:
| Attribute | What happens |
|---|---|
placement="SE" | Position SE. If it doesn't fit, try fallbacks. Default strategy (flip). |
placement="SE, clamp" | Flip + constrain to viewport. Overrides min-width, scrolls long menus. |
placement="SE, place" | Pinned at SE. No fallback, no clamping. |
| (not set) | Engine doesn't run. CSS positions the menu. |
Each link requests a specific direction with the default flip strategy. Trigger centered — every placement fits.
Same compass grid using <alap-link> with the placement attribute.
Placement works with inline text. Here the menu opens
above (N),
below (S),
beside (E),
or
Edge cases that exercise the fallback and clamping logic. Each test has a scroll to position link that puts the trigger at the viewport edge so you can see the fallback in action.
Links at the viewport edges. E on the right should flip to W; W on the left should flip to E.
Same test with the web component:
These links want to go above, but there's no room. Scroll so the row is at the very top of the viewport, then click.
Links pinned to each corner. Every placement requested is the worst possible for that corner. Using clamp strategy to constrain to viewport.
20 items with clamp strategy. The menu can't fit fully — it should clamp to available space and scroll internally. No page scroll.
Same links with flip (default) — no clamping, menu may overflow:
A long menu near the bottom with clamp. SE overflows massively — should flip above or clamp. Scroll so the links are near the bottom of your viewport, then click.
Scroll to test position ↓ — the links should be near the bottom of your viewport after scrolling.
Links pinned flush against the right viewport edge. SE and E have no room to the right. Using clamp to constrain wide menus.