Understand the floating dropdown

The settings interface calls the floating dropdown a Dropup menu, but its final direction is adaptive. POM Translate measures the toggle, menu, and viewport when the control opens.

Placement rules

The menu opens above the toggle when:

  • its height exceeds the available space below; and
  • there is more space above than below.

Otherwise it opens below. Horizontally, it aligns to the right when left alignment would overflow the viewport and right alignment fits.

The measurement is repeated while an open selector is affected by window resizing or scrolling.

Built-in size limits

The dropdown menu uses:

  • a width based on its content;
  • a minimum width equal to the toggle;
  • a maximum width constrained by the viewport;
  • a maximum height constrained by the viewport;
  • internal scrolling when the language list is taller.

The floating dropdown itself is fixed near the bottom-right corner. Its inset decreases slightly on viewports up to the WordPress mobile breakpoint of 782 pixels.

Interaction behavior

  • Clicking the toggle opens or closes it.
  • Opening one POM Translate dropdown closes another open one.
  • Clicking outside closes it.
  • Enter, Space, ArrowDown, or ArrowUp opens it and focuses the first enabled language.
  • Escape closes open selectors.
  • aria-expanded changes with the visual state.

Test constrained layouts

Use browser zoom and narrow widths to reproduce the tightest likely space. Confirm the menu remains visible above other layout layers, its language links can scroll, and it does not overlap a consent action that the visitor must reach.

Do not force an opening direction with theme CSS unless you also retest the plugin's measured placement attributes.