Popovers

Add floating menus and flyouts that open when a visitor clicks a button and keep the page usable.

A popover is an element that floats on top of your page when a visitor clicks a button. The rest of the page stays usable, so popovers work well for dropdown menus and flyout menus. Popovers use the browser's native Popover API, so published popovers open and close without Webflow JavaScript, unless you animate them.

Understand how popovers work

A popover has two parts: the popover element that holds your content, and a button that opens it. You connect the two from the button's Link settings, so you don't need to write any code.

Because the browser handles the behavior, you get several things automatically:

• Escape to close — visitors can press Escape to close an auto popover
• Tab access — visitors can tab through the links inside an open popover
• Light dismiss — clicking outside an auto popover closes it
• Interactive page — the page behind an open popover stays clickable

Add a popover

To add a popover to your page:

1. Open the Add panel
2. Scroll down to Advanced
3. Drag a Popover element onto the canvas
4. Add your content inside the popover, such as links, text, and images
5. Give the popover a descriptive name in the Navigator, like "Nav popover"

You can build the content the same way you build any other layout on the canvas.

You can also turn an existing Box element into a popover. Right-click the Box, click Convert to and choose Popover.

Show a popover on the canvas

Popovers are hidden on the canvas until you select them. To work on a popover's content again after selecting something else, do one of the following:

• Select the popover in the Navigator
• Select an element inside the popover
• Select a button that opens the popover

When you select the popover or a button that opens it, click Show on canvas or Hide on canvas in the toolbar to show or hide the popover. When you select something outside the popover, it hides again.

Open a popover from a button

To connect a button to a popover:

1. Select the button
2. Open the Settings panel
3. Under Link settings, choose Popover
4. Choose the popover you want to open
5. Choose an action

Popovers support three actions:

• Toggle — opens the popover if it's closed and closes it if it's open
• Show — only opens the popover
• Hide — only closes the popover

You can point more than one button at the same popover. Use a button with the Hide action inside the popover if you want visitors to close it from within.

Learn more about Link settings.

Position a popover

Choose where the popover appears when it opens.

1. Select the popover
2. Open the Style panel
3. Go to Position
4. Next to Anchor, choose Auto or None

Auto places the popover next to the button that opens it. Use the Area settings to choose which side and alignment the popover uses. None lets you set the position yourself, like any fixed element.

Turn on Anchor visibility to show the popover only when the button that opens it is visible.

Popover positions on the canvas are approximate. Check the final position in Preview.

Choose how a popover closes

Popovers have two modes. To choose one, go to Element settings > Popover settings.

• Auto — the popover closes when a visitor clicks outside it or presses Escape. Opening an auto popover closes any other open auto popover, unless the new popover is nested inside it
• Manual — the popover doesn't close when a visitor clicks outside it or presses Escape. It closes only when a visitor clicks a button that uses the Hide or Toggle action. Opening one doesn't close the others

Use auto for menus where only one should be open at a time. Use manual when visitors need several open together.

Test a popover

To test a popover, open Preview, then click the button that opens it. Preview runs the same native behavior as your published site, including clicking outside the popover and pressing Escape to close it.

Style a popover

Style a popover in the Style panel like any other element. To style the open state, open the Element states menu in the States section, then choose Popover open. To style the area behind the popover, choose Backdrop in the same menu.

Animate a popover

You can animate a popover opening and closing with a one-click interaction. To add an animation:

1. Select the popover
2. Click the Interactions tab
3. Under Trigger on..., choose Popover toggle
4. Next to Open actions, click +
5. Choose an action or an animation preset, like Fade in

To animate the popover closing, repeat steps four and five next to Close actions.

Learn more about triggers and targets in Interactions with GSAP.

Understand limitations

• Hover triggers aren't native. To open a popover on hover, use an IX3 hover trigger
• A popover's ID can't be changed
• Scroll lock isn't available for popovers, because they aren't designed to trap a visitor's focus. Scroll lock is a modal setting
• If you duplicate an element that holds both a button and its popover, the new button still opens the original popover. To fix this, select the copied button, then choose the copied popover in Link settings

Choose between a popover and a modal

Use a popover when visitors need to keep working with the page behind it, like a dropdown menu or flyout. Use a modal when visitors need to deal with something before they move on, like a signup form or a confirmation.

Learn more about Modals.