Skip to main content

Menu

What is Menu?​

Menu component is a user interface element that provides a navigational structure for accessing different features, options, or sections within the ILLA Cloud application. It typically consists of a list of menu items or links that users can interact with to navigate through various pages or perform specific actions.

Properties​

PropertiesDescription
Menuactual content and options displayed within the menu component
Hiddenhides the form component from the user's view
Directionthe orientation or layout of the menu component
Alignthe positioning or alignment of the menu component within its container or parent element

Data​

The component has some commonly used data, which can be called via {{componentName.propertyName}} in the app.

Property nameDescription
displayNamerepresents the name or label assigned to the component
hiddenwhether the menu component is visible or hidden
horizontalAligncontrols the horizontal positioning or alignment of the menu component within its container or parent element
itemscollection of menu items or options available within the menu component
modehow the menu operates or interacts with the user
selectedValuesholds the values of the menu items that have been selected or chosen by the user.

Example: {{menu1.displayName}}

Use case​

We will demonstrate how to make a form with name and age as input, as well as bar progress to show the completion progress of the form.

Step 1 Set the layout of the pages​

Go to the page configuration as the following steps：

pages

You can use the Preset Layouts, or manually add and delete sections to set the layout.

Step 2 Add views to a page​

View path: a string spliced after the page URL to access the specified view. After the app is deployed, the complete access address is as follows: https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}/{{page_name}}/{{view_path}}

You can also enter the homepage and default view via the following path:

https://builder.illacloud.com/{{team_identifier}}/deploy/app/{{app_id}}

add_page

Step 3 Connect menu and pages​

Add a Menu component to the top of the page.

Add event handlers to Menu items → set the Action to Set router → select the page and view

For the menu components, we can configure it to switch between pages and views

  1. Click the menu component to open its inspect page.
  2. Click an item to open its configuration.
  3. Under Event handler, click **+ New**.
  4. In the Edit event handler, select Set Router in action, and select the page and the view that you want to route to as the target of the event.

menu_items

We can do the same for other pages and view you want to route to.

Step 4 Test​

menu_test