| id |
title |
| popover-menu |
Popover Menu |
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.
| Property |
Value |
Description |
| 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
{{
[
{
"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.
Events
| <div style={{ width:"135px"}}> Event |
<div style={{ width:"100px"}}> Description |
| On select |
Triggers whenever an option is selected. |
:::info
Check Action Reference 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.
| <div style={{ width:"100px"}}> Action |
Description |
RunJS Query |
| setVisibility( ) |
Sets the visibility of the component. |
components.popovermenu1.setVisibility() |
| setLoading( ) |
Sets the loading state of the component. |
components.popovermenu1.setLoading() |
| setDisable( ) |
Disables the component. |
components.popovermenu1.setDisable() |
Exposed Variables
| <div style={{ width:"100px"}}> Variable |
<div style={{ width:"200px"}}> Description |
<div style={{width: "200px"}}> How To Access |
| label |
Holds the label name of the component. |
{{components.popovermenu1.label}} |
| options |
Holds all the option values of the component in array form. |
{{components.popovermenu1.options}} |
| lastClickedOption |
Holds the value of the last clicked option. |
{{components.popovermenu1.lastClickedOption}} |
| isLoading |
Indicates if the component is loading. |
{{components.popovermenu1.isLoading}} |
| isVisible |
Indicates if the component is visible. |
{{components.popovermenu1.isVisible}} |
| isDisabled |
Indicates if the component is disabled. |
{{components.popovermenu1.isDisabled}} |
Additional Actions
| <div style={{ width:"100px"}}> Action |
<div style={{ width:"150px"}}> Description |
<div style={{ width:"250px"}}> Configuration Options |
| 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. ). |
Devices
| <div style={{ width:"100px"}}> Property |
<div style={{ width:"150px"}}> Description |
<div style={{ width:"250px"}}> Expected Value |
| 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. |
Styles
| Property |
Description |
Configuration Options |
| Background |
Sets the background color of the popover menu. |
Color picker / HEX / RGBA / Custom Themes |
| Text |
Defines the text color of labels inside the menu. |
Color picker / HEX / RGBA / Custom Themes |
| Border |
Customizes the border color of the menu container. |
Color picker / HEX / RGBA / Custom Themes |
| Loader |
Sets the color of the loader. |
Color picker / HEX / RGBA / Custom Themes |
| Icon |
Allows you to select an icon for the trigger button. |
Select icon, enable/disable icon visibility |
| Icon color |
Adjusts the icon color and its alignment (left or right). |
Color picker / Alignment options |
| Border Radius |
Rounds the corners of the menu container. |
Pixel values / Predefined radius options |
| Box shadow |
Adds shadow effects to the menu for depth. |
Color picker / HEX / RGBA / Custom Themes |
Options
| Property |
Description |
Configuration Options |
| Label |
Sets the color for the display text for the menu option. |
Color picker / HEX / RGBA / Custom Themes |
| Icon color |
Sets the color of the option’s icon. |
Color picker / HEX / RGBA / Custom Themes |
| Description |
Sets the color for the optional helper text shown under the main label. |
Color picker / HEX / RGBA / Custom Themes |
