The **Popover Menu** is a UI component that lets you show a contextual menu or extra options when a user clicks or hovers on the button. Unlike a regular menu, the popover menu appears as a floating panel that’s anchored to the trigger element.
**Why use it?**
- To provide a compact set of actions tied to a button, icon, or card.
- To display contextual options related to a selected record, row, or item.
- Improves user experience with a lightweight, floating menu instead of cluttered buttons.
| **Button label** | String | The text displayed on the menu trigger button. |
| **Button type** | Primary / Outline | Defines the visual style of the trigger button. |
| **Show menu** | On hover / On click | Controls how the menu opens. |
## Options
Allows you to add options to the **Popover Menu** component field. You can click on **+ Add new option** and add options manually or enable **Dynamic options** and enter the options using code.
### Example Code for Dynamic Options
```js
{{
[
{
"label":"option1",
"description":"",
"value":"1",
"icon":"IconBolt",
"iconVisibility":true,
"disable":false,
"visible":true
},
{
"label":"option2",
"description":"",
"value":"2",
"icon":"IconBulb",
"iconVisibility":false,
"disable":true,
"visible":true
},
{
"label":"option3",
"description":"This is an option",
"value":"3",
"icon":"IconTag",
"iconVisibility":false,
"disable":false,
"visible":true
}
]
}}
```
**Options Loading State** allows you to add a loading state to the dynamically generated options. You can enable or disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression.
| On select | Triggers whenever an option is selected. |
:::info
Check [Action Reference](/docs/actions/run-query) docs to get detailed information about all the **Actions**.
:::
## Component Specific Actions (CSA)
The following actions of the component can be controlled using the component-specific actions (CSA), you can trigger it using an event or use a RunJS query.
| Loading state | Enables a loading spinner, often used with `isLoading` to indicate progress. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
| Visibility | Controls component visibility. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
| Disable | Enables or disables the component. Toggle or set dynamically. | Enable/disable the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
| Tooltip | Provides additional information on hover. Set a string value for display. | String (e.g., `Select an option.` ). |
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
