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

Properties	Description
Menu	actual content and options displayed within the menu component
Hidden	hides the form component from the user's view
Direction	the orientation or layout of the menu component
Align	the 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 name	Description
displayName	represents the name or label assigned to the component
hidden	whether the menu component is visible or hidden
horizontalAlign	controls the horizontal positioning or alignment of the menu component within its container or parent element
items	collection of menu items or options available within the menu component
mode	how the menu operates or interacts with the user
selectedValues	holds 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：

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}}

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.

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

Step 4 Test