Popup Menu Behavior

Ethan · 2025-09-21T10:51:13.906+00:00

Hi All, I am building a popup menu component and want to ensure that the menu is always in-bounds, and does not clip out of the screen. Most apps just work off putting it in the opposite side to whatever quadrant the menu is opened in, however I cannot think of how to do this using formula's, or if there is a much cleaner solution I am missing.What would you guys suggest?

Ethan

23 days ago

Hi All, I am building a popup menu component and want to ensure that the menu is always in-bounds, and does not clip out of the screen. Most apps just work off putting it in the opposite side to whatever quadrant the menu is opened in, however I cannot think of how to do this using formula's, or if there is a much cleaner solution I am missing.

What would you guys suggest?
✅1
@Ethan
Hi All, I am building a popup menu component and want to ensure that the menu is always in-bounds, and does not clip out of the screen. Most apps just work off putting it in the opposite side to whatever quadrant the menu is opened in, however I cannot think of how to do this using formula's, or if there is a much cleaner solution I am missing.

What would you guys suggest?
lennartblmn

20 days ago

the new solution for this is using [popovers](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/popover) with [anchor positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_anchor_positioning) but anchor positioning is [not supported](https://caniuse.com/?search=anchor%20position) by most browsers yet.

The manual method is using element.getBoundingClientRect(), and see if there is enough space to place the popover where you want to, and if not show it one the other side.

So on click, getBoundingClientRect() of the popover, add the left and width value to get the right position, get the width of the screen, and see if it fits in there.
Lucas G

19 days ago

The question is how many cases you want to support
Do you want to handle scrolling and/or resizing as well?
There's a bunch of things that make it a bit of a pain to manually implement so most times you'll see something like floating ui used
Ethan

19 days ago

Thanks for these. While I'd like to build a fully fledged solution, I realized it not worth it at the moment, since I only use this menu in two places, and I can see this issue can become a rabbit hole.

Popup Menu Behavior

Ethan

lennartblmn

Lucas G

Ethan