Dropdown

Portal

Use a portal to render the Dropdown to the body of the page rather than as a sibling of the trigger. This can be useful to visually "break out" of a bounding container with overflow or z-index styles. Note that you may have to adjust the modifiers to get the exact behavior that you want.

<ScrollParent>
  <Dropdown
    data={data}
    usePortal
    isOpen
    modifiers={{
      preventOverflow: {
        escapeWithReference: true
      }
    }}>
    <Button>Menu</Button>
  </Dropdown>
</ScrollParent>