Alap uses a compass-based placement engine. Click any link to see the menu appear in the specified direction. When a preferred placement doesn't fit, the engine falls back automatically.
Each link requests a specific direction. With the trigger centered on the page, 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.
20 items. The menu can't fit fully — it should clamp to available space and scroll internally. No page scroll.
A long menu near the bottom. 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.