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
Add Menu Element
Log in to the Kuika platform.
Open your project from the Apps screen.
Go to the UI Design module.
Create a Master Screen by clicking the “+” icon next to Master Screens in the Screens panel on the left side.
Select the Navigation category in the Elements panel on the left side.
Drag and drop the Menu element to the workspace. You can place the menu element on the left, top or right edge areas.
Set the orientation of the menu to horizontal (Horizontal) or vertical (Vertical) using the Direction parameter from the Properties panel.
Left Menu: The menu is displayed vertically on the left border.
Header or Footer: The menu is displayed horizontally.
Menu Element Properties
You can configure the following settings in the Properties panel:
Select a Data Type: You can configure the menu data as Static or Dynamic.
Static: You can add menu items manually. You can add submenus with + Sub Menu and single-level menu items with + Menu Item.
Dynamic: Menu items are taken from a data source. You can select the custom action of the data source in the Options field.
Direction: Allows menu items to be displayed horizontally (Horizontal) or vertically (Vertical).
Theme: You can select the menu theme as Light or Dark.
Primary Color: You can set the color of the selected menu item.
Collapsed: The menu is displayed in a collapsed form. When the menu icon is not defined, the first letter of the items appears.
Selected Key: Indicates which screen the user has selected in the menu.
Collapsible: Adds an expand/collapse button to the menu.
Collapsed Button Color: Sets the color of the expand/collapse button.
Hamburger Control: A control element that collapses a menu item into an icon (three horizontal lines) and opens the menu when clicked.
Multi-Language Support in Menu Element
Open the app where you added the menu.
Go to the Languages panel in the left panel.
Click the “+” icon next to the Languages heading.
In the New Language window, select and name the language you want to add.
Complete the process by clicking the CREATE button.
The text in the Menu element is automatically added to the translation window in each language you add. By adding translations you can enable multilingual support for your app.
Follow this guide to use the Menu element effectively in your app.
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.
