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 trigger
<Popover content={ <div style={{ padding: "2rem" }}> <Button>Content will be focused</Button> </div> } > <Button iconAfter={<IconChevronDown />}>Popover trigger</Button> </Popover>
Dropdown menu
Combine a Popover with a MenuList to create a dropdown menu.
User options
<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>
Show Code
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.
<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>
Show Code
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.