# Popover (Dropdown Menu)
Popovers (`Popover`) are dropdown menus activated by a button. Use popovers to create dropdown menus ranging from simple lists to complex nested menus.
Common uses:
- "More actions" dropdown menus
- Navigation menus
- Settings menus
- Context menus (right-click menus)
| Prop | Data type | Required? | Description |
| ------ | --------- | --------- | ---------------------------------------------------------- |
| `open` | Boolean | No | Controls whether the popover is open. Defaults to `false`. |
## Options button
The options button (`OptionsButton`) is a stylized button you can use to hide and show your popover. Use [Vue event handling](https://vuejs.org/guide/essentials/event-handling.html) to map the button to a boolean value.
```vue{7}
```
You can also use the `toggleOpen` prop in the ` tag if you prefer not to use refs to control the menu's visibility.
```vue{8-12}
{{ bcPrivacy }}
```
{{ bcPrivacy }}
## Items
Popovers contain a list of menu items. Items can contain different information based on their type.
::: info
Lists of items must be nested inside a `` tag directly under the `` tag.
:::
### Popover item
The popover item (`PopoverItem`) is a simple button that uses [Vue event handling](https://vuejs.org/guide/essentials/event-handling.html). Each item contains a [slot](https://vuejs.org/guide/components/slots.html) which you can use to add a menu label and icon.
```vue{10-13}
Report
```
Report
### Checkbox
The checkbox (`PopoverCheckbox`) is an item that acts as a selectable box. Use [`v-model`](https://vuejs.org/api/built-in-directives.html#v-model) to bind the checkbox to a boolean value. Each checkbox contains a [slot](https://vuejs.org/guide/components/slots.html) which you can use to add a menu label.
```vue{11-16}
Bandcamp
Creative commons
```
Bandcamp
Creative commons
### Radio
The radio (`PopoverRadio`) is an item that acts as a radio selector.
| Prop | Data type | Required? | Description |
| ------------ | --------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `modelValue` | String | Yes | The current value of the radio. Use [`v-model`](https://vuejs.org/api/built-in-directives.html#v-model) to bind this to a value. |
| `choices` | Array\ | Yes | A list of choices. |
```vue
```
### Separator
Use a standard horizontal rule (``) to add visual separators to popover lists.
```vue{14}
Bandcamp
Creative commons
```
Bandcamp
Creative commons
## Submenus
To create more complex menus, you can use submenus (`PopoverSubmenu`). Submenus are menu items which contain other menu items.
```vue{10-18}
Organize and share
Bandcamp
```
Organize and share
Bandcamp
## Extra items
You can add extra items to the right hand side of a popover item by nesting them in a `` tag. Use this to add additional menus or buttons to menu items.
```vue{18-29,34-37}
Organize and share
Bandcamp
{{ bcPrivacy }}
Share by link
```
Organize and share
Bandcamp
{{ bcPrivacy }}
Share by link
## Menu
Here is an example of a completed menu containing all supported features.
```vue
Play next
Append to queue
Add to playlist
Sample playlist
New playlist
Add to favorites
Organize and share
Bandcamp
{{ bcPrivacy }}
Creative Commons
{{ ccPrivacy }}
New library
Share by link
Download
Report
```
Play next
Append to queue
Add to playlist
Sample playlist
New playlist
Add to favorites
Organize and share
Bandcamp
{{ bcPrivacy }}
Creative Commons
{{ ccPrivacy }}
New library
Share by link
Download
Report