Skip to content
Sancho UI
Toggle dark mode
Getting started
Built with ☕ by
Ben McMahen

Popover

A popover typically contains supplemental content to the item with which it's attached. A common use case is to create dropdown menus. A popover should be triggered by a button for full accessibility.

Basic usage

The content of the popover is supplied to the content prop. The child is the element that will trigger it.

<Popover
  content={
    <div style={{ padding: "2rem" }}>
      <Button>Content will be focused</Button>
    </div>
  }
>
  <Button iconAfter={<IconChevronDown />}>Popover trigger</Button>
</Popover>

Combine a Popover with a MenuList to create a dropdown menu.

<Popover
  content={
    <MenuList>
      <MenuItem contentBefore={<IconUser />} onPress={() => alert("Hello 1")}>
        Profile
      </MenuItem>
      <MenuItem contentBefore={<IconList />} component="a" href="#">
        Lists
      </MenuItem>
      <MenuItem contentBefore={<IconHome />}>Moments</MenuItem>
      <MenuDivider />
      <MenuItem contentBefore={<IconInstagram />}>Promote Mode</MenuItem>
      <MenuItem contentBefore={<IconPackage />}>Analytics</MenuItem>
    </MenuList>
  }
>
  <Button iconAfter={<IconChevronDown />}>User options</Button>
</Popover>

ResponsivePopover

Because dropdown menus often aren't great on mobile devices, this component will use a bottom Sheet on smaller screens while continuing to use a Popover on larger screens.

show more
<ResponsivePopover
  content={
    <MenuList>
      <MenuItem contentBefore={<IconUser />} onPress={() => alert("Hello 1")}>
        Profile
      </MenuItem>
      <MenuItem contentBefore={<IconList />} component="a" href="#">
        Lists
      </MenuItem>
      <MenuItem contentBefore={<IconHome />}>Moments</MenuItem>
      <MenuDivider />
      <MenuItem contentBefore={<IconInstagram />}>Promote Mode</MenuItem>
      <MenuItem contentBefore={<IconPackage />}>Analytics</MenuItem>
    </MenuList>
  }
>
  <IconButton variant="ghost" icon={<IconMoreVertical />} label="show more" />
</ResponsivePopover>

API

Popover
isOpenboolean
Whether the popover is currently open
children*ReactElement<ButtonProps | IconButtonProps, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> | ... 6 more ... | (ReactElement<...> & ReactPortal)
The trigger of the popover
content*ReactNode
the content of the popover
closeOnMenuItemClickboolean
Whether the menu should close when clicked
placementPlacements
The default placement of the popover. This will change if the popover cannot properly display in the default position.
ResponsivePopover
isOpenboolean
Whether the popover is currently open
children*ReactElement<ButtonProps | IconButtonProps, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)> | ... 6 more ... | (ReactElement<...> & ReactPortal)
The trigger of the popover
content*ReactNode
the content of the popover
closeOnMenuItemClickboolean
Whether the menu should close when clicked
placementPlacements
The default placement of the popover. This will change if the popover cannot properly display in the default position.