New modal and popover elements

Webflow added native popover and modal elements, so you can build dropdown menus, tooltips, sign-up prompts, and confirmations in Webflow without custom code or third-party tooling.

Popovers float next to the button that opens them and leave the rest of the page usable, which suits menus, dropdown panels, and tooltips that open on click. Modals take over the page until a visitor closes them, so they fit sign-up prompts, confirmations, and forms. Both are in the element menu in the left sidebar, and you drag them onto the page.

For motion, choose "Animate open/close" in an element's settings and Webflow adds an open and close animation you can customize in the Interactions panel. To open a popover on hover, add a Hover trigger that drives its open and close. Interactions are powered by GSAP.

Popovers use the browser's native Popover API, and buttons open them with declarative invoker commands, so opening one needs no JavaScript. Modals are native dialog elements opened as modals: the page behind them goes inert, the browser handles focus and the Escape key, and focus returns to the button when they close. Both render in the browser's top layer, so you don't have to fight z-index. In the Style panel you can style a modal's ::backdrop and a popover's :popover-open state directly.

The new elements are available on all plans at no additional cost.