Kuika's Menu element creates a navigation menu in applications so that users can easily access different pages or functions. Menu allows users to switch to different screens and allows you to create multi-level menus. In this guide, you will learn how to add and configure the Menu element and add multi-language support.
The Menu element can be used in both web and mobile applications.
This training content consists of the following topics:
Add Menu Element
Menu Element Properties
Providing Multi-Language Support
Element settings and customization
Opening and Closing Submenus and Arranging Them in Columns
The Kuika Menu element allows you to create multi-level menu structures using the Sub Menu feature. This allows users to view or hide submenu options by clicking on a main menu heading. This structure makes it easier for users to navigate within the application and simplifies complex menus.
Creating a Sub Menu Structure
Select Menu Type: Select Static as the data type for the menu element. This allows you to create the menu structure manually.
Add Sub Menu: In the Properties panel, click the + Sub Menu button to add a main menu heading. This element acts as the heading to which the sub menus will be linked.
Add Sub Menu Items: Click the + Menu Item button below the Sub Menu you added to create one or more sub menu items. Each Menu Item can direct the user to a different screen or process page.
Automatic Transition Behaviour: When menu headings are clicked, sub-menus open and close automatically on the Kuika platform. No additional configuration is required for this transition.
Vertical Alignment (Display as Columns One Below the Other)
Set Menu Direction: Set the Direction parameter of the menu element to Vertical. This will place both the main menu headings and submenu items vertically in a hierarchical structure.
Column Structure: Submenu items are listed in columns immediately below the heading they are associated with. This structure provides a folder-like navigation experience, especially when used in left-side menus.
Responsive Compatibility: The menu structure is responsive and adapts to the screen width. On mobile devices, submenus are displayed in a collapsible format, while on wider screens they can be displayed in an open or fixed format.
Collapse and Expand Menu
When the Collapsed property is enabled in the menu element, the menu appears collapsed, showing only icons or the first letters of the items.
When the user clicks on an icon in the collapsed menu, the menu expands to reveal the submenus.
Usage Scenario Example
For example:
You can create a Sub Menu called ‘Products’.
Under this heading, you can add subheadings such as ‘Add New Product,’ ‘Product List,’ and ‘Categories’ using + Menu Item.
When the user clicks on ‘Products,’ these subheadings open in a column. When switching to another heading (e.g., “Orders”), you can define behaviour so that the ‘Products’ subheadings close if desired.
