--- title: "Menu Component" slug: "menu-component" updated: 2025-09-26T06:10:03Z published: 2025-09-26T06:10:03Z canonical: "docs.unqork.io/menu-component" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.unqork.io/llms.txt > Use this file to discover all available pages before exploring further. # Menu Component UDesignerClassic Designer ## Overview The **Menu component** is a [Primary Fields component](/v1/docs/data-event-processing-components) that attaches a drop-down list of customizable options to an element. For example, if your page has a [Button](/v1/docs/button-component) component labeled **Settings**, and you want to display options when an end-user clicks it, use the Menu component to create the drop-down effect. > [!WARNING] > The Menu component is a Vega (2.0) runtime component and is not supported in the runtime. ## About the Configuration Window > To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article. ## Display Panel ### Field Text [![A static image displaying the Menu component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display_thumb_0_0(3).jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/display(3).jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) | Setting | Description | | --- | --- | | **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. | ### Default State Options | Setting | Description | | --- | --- | | **Hide Field** | Displays or hides the component from view. Setting Hide Field to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) (ON) hides the component in Express View. Setting it to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) (OFF) displays the component. The component is always visible in the Module Builder. By default, Hide Field is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) (OFF). | ### Anchor Location | Setting | Description | | --- | --- | | **propertyID** | To attach the Menu component to another component, enter the component's Property ID. For example, enter a [Button](/v1/docs/button-component) component's Property ID in this field to attach the Menu component to the button. In Express View, when an end-user clicks the button, the menu displays below it. | ## Data Panel ### Values [![A static image displaying the Menu component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data_thumb_0_0(4).jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/data(4).jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) | Setting | Description | | --- | --- | | **Data Source Type** | Use the **Values** table to create individual options in the menu. End-users open the menu to see each of the options in a list, the option's adornments, and click on the option to trigger its action. | | **Label** | Enter the text that displays to the end-user. When an end-user clicks the text, the **Action** setting fires. | | **Value** | Create a key value for targeting the option. For example, if you have three options in your menu, you could assign the following keys: `menu1`,` menu2`,` menu3`. | | **Action** | The action triggered when an end-user clicks the **Option Label** text. Enter a Vega Operation to perform or a Property ID to trigger. | ## Adding a Menu Component In this example, configure a Button component to trigger a Menu component. > [!NOTE] > These instructions assume that you have an open module saved with a title. ### Configure the Button Component This [Button](/v1/docs/button-component) component acts as the visual anchor for the Menu component. Your end-user clicks the button to display the menu beneath it. 1. In the Module Builder, drag and drop a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(11).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) Button** component onto the canvas. 2. In the Property ID field, enter **btnMenu**. 3. In the Label Text field, enter `Navigate`. 4. Navigate to the **Actions** settings. 5. Under **Action Type**, click **Event**. > [!NOTE] > You'll configure the **btnMenu** **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(11).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) Button** component's Operations Builder settings after configuring the Menu component. 6. Click **Save Component**. ### Configure the Menu Component Configure a Menu component to anchor to the Button component. You can also configure options based on your needs. 1. Drag and drop a Menu component onto the canvas, placing it below the **btnMenu** **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(11).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) Button** component. 2. In the Property ID field, enter **menuNav**. 3. In the Label Text field, enter `menuNav`. 4. Under **Anchor Location**, in the **propertyID** field, enter **btnMenu**. This attaches the menu to the Button component in Express View. 5. Navigate to the **Data** settings. 6. In the **Values** table, enter the following: | | Label | Value | Action | | --- | --- | --- | --- | | 1 | Option A | menu1 | | | 2 | Option B | menu2 | | | 3 | Option C | menu3 | | > [!TIP] > You can configure options to perform specific functions using the **Action** setting. For example, each option could direct the end-user to another module, display [Hidden](/v1/docs/hidden-component) components, trigger a workflow, and so on. [![A static image displaying the Menu component's Data Values table. The first three rows are filled out with Options.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/menuNav_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/menuNav.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) 7. Click **Save Component**. ### Configure the Button Component's Operations Builder 1. Open the **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(11).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) Button** component's configuration drawer. 2. Navigate to the **Actions** settings. 3. Next to **Events & Operations**, click Edit. 4. From the **Add Event*** drop-down, enter or select the `On Click` event. 5. Click **+ Add Operation**. 6. In the **Operation Type*** field, enter or select `TOGGLE`. 7. In the **Summary** field, enter `Open Menu on Button Click`. 8. In the **Target Key*** field, enter or select `menuNav`. 9. In the **Property*** field, enter `open`. [![A static image displaying the Button component's Operation builder. the Operation type is set to Toggle, and the fields are filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/buttonOperations_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/buttonOperations.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) 10. Click **Save** to close the Add Operation window. The operation displays in the Operations Builder configuration window as a new row. The Operation Type and Operation Summary values display inside the row. 11. Click Close to close the Operations Builder modal. 12. Click **Save Component** . 13. **Save** your module. Preview your module in Express View. Click the **Navigate** button to display the menu: [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Menu_Component_ExpressView(1).webm?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) ## Overview The **Menu component** is a [Primary Fields component](/v1/docs/data-event-processing-components) that attaches a drop-down list of customizable options to an element. For example, if your page has a [Button](/v1/docs/button-component) component labeled **Settings**, and you want to display options when an end-user clicks it, use the Menu component to create the drop-down effect. ## About the Configuration Window > [!TIP] > To learn more about general component settings, view our [General Component Settings](/v1/docs/general-component-settings) article. ## Display Panel [![A static image displaying the Menu component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Menu_Component_Display_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Menu%20Component%20Display.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) ### Field Text | Setting | Description | | --- | --- | | **Label Text** | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. | ### Anchor Location | Setting | Description | | --- | --- | | **propertyID** | To attach the Menu component to another component, enter the component's Property ID. For example, enter a [Button](/v1/docs/button-component) component's Property ID in this field to attach the Menu component to the button. In Express View, when an end-user clicks the button, the menu displays below it. | ### Default State Options | Setting | Description | | --- | --- | | **Hide Field** | Displays or hides the component from view. Setting Hide Field to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) (ON) hides the component in Express View. Setting it to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) (OFF) displays the component. The component is always visible in the Module Builder. By default, Hide Field is set to ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) (OFF). | ## Data Panel [![A static image displaying the Menu component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Menu_Component_Data_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Menu%20Component%20Data.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) ### Data | Setting | Description | | --- | --- | | **Data Source Type** | Use the **Values** table to create individual options in the menu. End-users open the menu to see each of the options in a list, the option's adornments, and click on the option to trigger its action. | | **Key** | Create a key value for targeting the option. For example, if you have three options in your menu, you could assign the following keys: `menu1`, `menu2`,` menu3`. | | **Option Label** | Enter the text that displays to the end-user. When an end-user clicks the text, the **Action** setting fires. | | **Action** | The action triggered when an end-user clicks the **Option Label** text. Enter a Vega Operation to perform or a Property ID to trigger. | ## Adding a Menu Component In this example, configure a Button component to trigger a Menu component. > [!NOTE] > These instructions assume that you have an open module saved with a title. ### Configure the Button Component This [Button](/v1/docs/button-component) component acts as the visual anchor for the menu. Your end-users click the button to display the menu underneath. 1. In the Module Builder, drag and drop a **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(11).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) Button** component onto the canvas. 2. In the Property ID field, enter **btnMenu**. 3. In the Label Text field, enter `Navigate`. 4. In the component's configuration menu, click **![Actions Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/actions_icon(10).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) Actions**. 5. Under **Action Type**, click **Event**. > [!NOTE] > You'll configure the **btnMenu** **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(11).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) Button** component's Operations Builder settings after configuring the Menu component. 6. Click **Save & Close**. ### Configure the Menu Component Configure a Menu component to anchor to the Button component. You can also configure options based on your needs. 1. Drag and drop a Menu component onto the canvas, placing it below the **btnMenu** **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(11).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) Button** component. 2. In the Property ID field, enter **menuNav**. 3. In the Label Text field, enter `menuNav`. 4. Under **Anchor Location**, in the **propertyID** field, enter **btnMenu**. This attaches the menu to the Button component in Express View. 5. In the component's configuration menu, click select **D****ata**. 6. In the **Values** table, enter the following: | | Key | Optional Label | Action | Left Adornments | Right Adornments | | --- | --- | --- | --- | --- | --- | | 1 | menu1 | Option A | | | | | 2 | menu2 | Option B | | | | | 3 | menu3 | Option C | | | | [![A static image displaying the Menu component's Data Values table. The first three rows are filled out with Options.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Menu_Component_Example_MenuComp_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Menu%20Component%20Example%20MenuComp.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) You can configure options to perform a certain function using the **Action** setting. For example, each option could direct the end-user to another module, display [Hidden](/v1/docs/hidden-component) components, trigger a workflow, and so on. 7. Click **Save & Close**. ### Configure the Button Component's Operations Builder 1. Hover over the **![Button component Icon](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/button_component_icon(11).png?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) Button** component. A 6-button toolbar displays above the component on hover-over. 2. Click the (Operations Builder) button. The Operations Builder modal displays. 3. In the Select an Event | ▾ field, enter or select the **On Click** event. 4. Click Add. The **New Operation** configuration menu displays. 5. In the **Operation Summary** field, enter `Open Menu`. 6. In the **Operation Type** field, enter or select `Toggle`. 7. In the **Target Key** field, enter or select `menuNav`. 8. In the **Property*** field, enter `open`. [![A static image displaying the Button component's Operation builder. the Operation type is set to Toggle, and the fields are filled out.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsB_ButtonOps_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/OpsB%20ButtonOps.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) 9. Click **Save Operation** to close the New Operation window. The operation displays in the Operations Builder configuration window as a new row. The Operation Type and Operation Summary values display inside the row. 10. Click **Save & Close** to close the Operations Builder modal. 11. **Save** your module. **Preview** your module in Express View. Click the **Navigate** button to display the menu: [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Menu_Component_ExpressView(1).webm?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) ## Structure of a Menu Component's Data Using the example above, execute the [Vega Console](/v1/docs/vega-console) command UNQENG.tools.getComponentState('menuNav') in the DevTools Console to display the component's data structure: [![A static image displaying a Menu component in the DevTools Console view.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_DataStructure_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD%20DataStructure.jpg?sv=2026-02-06&spr=https&st=2026-11-11T02%3A57%3A41Z&se=2026-11-11T03%3A57%3A41Z&sr=c&sp=r&sig=iOahG1jfLJB6AzN7Np%2BKUTPmmNdVzsj8T6Kb%2BJ1zWHQ%3D) ## Resources - [Modify the Menu component using the toolbar settings](/v1/docs/component-toolbar-settings). - [Discover more about Vega](/v1/docs/welcome-to-vega). - [Learn about the Button component](/v1/docs/button-component). - [Discover the Initializer component.](/v1/docs/initializer-component) End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience. A Property ID is the unique field ID used by Unqork to track and link components in your module. Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View. End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. A modal is a window that appears on top of the content you are currently viewing. The DevTools Console helps you securely store, build, test, and deploy your software.