Skip to content
+

Popper

A Popper can be used to display some content on top of another. It's an alternative to react-popper.

Some important features of the Popper component:

  • 🕷 Popper relies on the 3rd party library (Popper.js) for perfect positioning.
  • 💄 It's an alternative API to react-popper. It aims for simplicity.
  • Its child element is a Base UI Portal on the body of the document to avoid rendering problems. You can disable this behavior with disablePortal.
  • The scroll isn't blocked like with the Popover component. The placement of the popper updates with the available area in the viewport.
  • Clicking away does not hide the Popper component. If you need this behavior, you can use the Base UI Click-Away Listener - see the example in the menu documentation section.
  • The anchorEl is passed as the reference object to create a new Popper.js instance.

Basic Popper

Press Enter to start editing

Transitions

The open/close state of the popper can be animated with a render prop child and a transition component. This component should respect the following conditions:

  • Be a direct child descendent of the popper.
  • Call the onEnter callback prop when the enter transition starts.
  • Call the onExited callback prop when the exit transition is completed. These two callbacks allow the popper to unmount the child content when closed and fully transitioned.

Popper has built-in support for react-transition-group.

Press Enter to start editing

Alternatively, you can use react-spring.

Press Enter to start editing

Positioned popper



Scroll playground

Scroll around this container to experiment with flip and preventOverflow modifiers.

Appearance
(the children stay within their parent DOM hierarchy)
Modifiers (options from Popper.js)
Prevent Overflow
Flip
Arrow
<Popper
  placement="bottom"
  disablePortal={false}
  modifiers={[
    {
      name: 'flip',
      enabled: true,
      options: {
        altBoundary: true,
        rootBoundary: 'document',
        padding: 8,
      },
    },
    {
      name: 'preventOverflow',
      enabled: true,
      options: {
        altAxis: true,
        altBoundary: true,
        tether: true,
        rootBoundary: 'document',
        padding: 8,
      },
    },
    {
      name: 'arrow',
      enabled: false,
      options: {
        element: arrowRef,
      },
    },
  ]}
>

Virtual element

The value of the anchorEl prop can be a reference to a fake DOM element. You need to create an object shaped like the VirtualElement.

Highlight part of the text to see the popper:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse lacinia tellus a libero volutpat maximus.

Supplementary projects

For more advanced use cases you might be able to take advantage of:

material-ui-popup-state

stars npm downloads

The package material-ui-popup-state that takes care of popper state for you in most cases.

Unstyled

Use the Base UI Popper for complete ownership of the component's design, with no Material UI or Joy UI styles to override. This unstyled version of the component is the ideal choice for heavy customization with a smaller bundle size.

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.