Appear above, appear below

Start next to the trigger: a 4px offset and a fade, nothing more.

From polaris-tokens, motion keyframes. Duration and easing here are our choice.

Menus above and below

Open both menus. Try Exaggerate offset to see the direction.

One keyframe for bothBad
below menu: appear-above
Keyframe per sideGood
below: appear-below
@keyframes p-motion-keyframes-appear-above {
  from { transform: translateY(var(--p-space-100)); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes p-motion-keyframes-appear-below {
  from { transform: translateY(calc(var(--p-space-100) * -1)); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

Why it matters, pros and cons

Why it matters

appear-above starts 4px low and rises; appear-below starts 4px high and drops. Each begins nearest its trigger and moves away from it.

Pros

  • The menu reads as coming out of its trigger.
  • The offset is a token (space-100), not a magic 4px.
  • Fade plus 4px is cheap and does not fight the content.

Cons

  • 4px is subtle and may be invisible on a large surface.
  • A menu that flips sides must pick its keyframe at open time.
  • Reduced motion drops the offset and keeps the fade.