Putting CSS Anchor Positioning to the test by throwing dropdown menus around 💪 [popover].dropdown { top: anchor(bottom); right: anchor(right); position-try-options: flip-block, flip-inline; } That's all 👆 Keeps the menu tethered to the button

Here's the @CodePen link! 🚀 Starting to piece together these demos for @figma Config 2024 🫡 This demo should be good everywhere. Where Anchoring isn't supported, it uses floating-ui 🤙

Cool, I tried something similar with React Native. I had to find the distance between the edge and the menu, then change its position. Curious about the throwing menu—how is it so smooth? Did you nail that with CSS or need some JS?

@chrrynobaka

One gotcha that I’ve noticed is that source order matters. You can’t reference an anchor name before it’s declared. Makes sense, but depending the scenario, it can definitely be a pain.

Can this be animated? Like here:

So cool

My G haha

Cool 😎

Is it possible to shrink height up to some point before flipping vertically?