Popovers
Popovers are inline dropdown menus that are revealed when the user clicks on a button. Unlike a dropdown, which lets the user select an option from a list, a popover contains a list of actions. Otherwise, they look and behave just like dropdown menus.
Examples & Guidelines
- Sort the list in a logical order. Put the most popular choice at the top.
- A popover should have no fewer than 2 options. If there’s only one option, use a button instead.
- If a popover has more than ten items, it’s probably too long. Think about refactoring your design.
- When a popover is open, the button it came out of should be in its Active state.
Positioning
Popovers like to be centered with the button that they come out of. But if there isn’t room on screen, they reposition themselves to be fully visible.
Default
More Actions
Flipped menu
Left menu
Right menu