Loading video...

Video Failed to Load

Go Home

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

112,008 views • 2 years ago •via X (Twitter)

9 Comments

jhey ▲🐻🎈's profile picture
jhey ▲🐻🎈2 years ago

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 🤙

Arunabh Verma's profile picture
Arunabh Verma2 years ago

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?

𝓈𝓃𝑜𝓌𝓎 𝚙𝚑𝚒𝚕 🌌✨❄️🫂's profile picture
𝓈𝓃𝑜𝓌𝓎 𝚙𝚑𝚒𝚕 🌌✨❄️🫂2 years ago

@chrrynobaka

Daniel Vaughn's profile picture
Daniel Vaughn2 years ago

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.

wsk's profile picture
wsk2 years ago

Can this be animated? Like here:

Agrim Sharma's profile picture
Agrim Sharma2 years ago

So cool

Nine's profile picture
Nine2 years ago

My G haha

Nir Galon's profile picture
Nir Galon2 years ago

Cool 😎

Alex Inkin's profile picture
Alex Inkin2 years ago

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

Related Videos