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.

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.

Element Settings and Customization

Authorization

Anonymous Access: Allows users to access without entering account information.
All Roles Access: Provides access by verifying users' account information.
For element-level authorization, edit Authorization settings in the Properties panel.

Visibility

Always Visible: Element is always visible.
Hidden: Element is hidden.
Sometimes Visible: The element is visible depending on a specific condition.

To configure the setting:

Select the element on the screen.
Open the Properties panel on the right edge.
In the Visibility field, select an option according to your needs.

Editability

Enabled: Elements can be edited.
Disabled: Element cannot be edited.
Sometimes Enabled: The element can be edited or uneditable according to certain conditions.

Interface Design with Style Panel

By customizing your elements with the Styling Panel, you can create impressive interfaces for your web and mobile applications. In this section, you can configure the following settings:

Layout: Sizing, alignment and padding settings. Settings include Size, Min Size and Align.
Text: Font, style, color, size and spacing settings.
Fill: Customize the background with color or images.
Border: Add borders and corner radius settings.
Shadow: Add a shadow effect to add depth to elements.

By following these steps, you can configure the Area Chart element to suit your needs.

Actions

Kuika supports the following system actions:

Arithmetic, Authorization, Condition, Device, Export, Geolocation, Inversion, Local Storage, Multi Language, Navigation, Notification, Payment, UI Control, Process Administration, Process Automation, Trigger, Process Automation, Process Administration and String Operations.
You can also use SQL actions that you create yourself.
You can use the +ADD ACTION button from the Properties panel to add an action.