Kuika's Menu element allows users to easily access different pages or processes within the application. The menu displays main headings and their submenus hierarchically with multi-level structure support. This structure provides users with an organized, intuitive, and accessible navigation experience within the application.

The Menu element can be used in both web and mobile applications.

Areas of Use

• Creating a left-side navigation menu
• Switching between different screens
• Categorizing content such as products, orders, or projects
• Setting up multi-level menu structures
• Dynamizing menu content with multi-language support

Usage Scenario – Product Management Menu

In an e-commerce management panel, a vertical Menu is added on the left side so that users can easily perform product-related operations.

The menu structure is as follows:

• Products (Main Menu)
  
  • Add New Product
  • Product List
  • Categories
    
    • Add New Category
• Projects
• Pricing

When the user clicks on the “Products” heading, the submenus open; clicking again closes them. When the menu is collapsed, only the icons are visible.

Connecting the Data Source

1. Datasources Module

• Go to the Datasources module.
• Click the + icon next to the Tables heading.
• Name the table MenuData.
• Create the following table.

• Then, create a new SQL Action from Actions > SQL Actions and name it MenuData:

SELECT 1 AS Id, NULL AS ParentId, ‘Products’ AS Label, NULL AS Path, ‘box’ AS IconUNION ALLSELECT 2, 1, ‘Add New Product’, ‘/new-product’, ‘plus’UNION ALLSELECT 3, 1, ‘Product List’, ‘/products’, ‘list’UNION ALLSELECT 4, 1, ‘Categories’, NULL, ‘grid’UNION ALLSELECT 5, 4, ‘Add New Category’, ‘/new-category’, ‘folder-plus’UNION ALLSELECT 6, NULL, ‘Projects’, ‘/projects’, ‘briefcase’UNION ALLSELECT 7, NULL, ‘Pricing’, ‘/pricing’, ‘dollar-sign’;

UI Design Module Operations

1. Go to the UI Design module.
2. Under Master Screens on the left side, create a new Master Screen.
3. Drag and drop the Elements > Navigation > Menu element onto the workspace.

In the Properties Panel, configure the following settings:

• Direction → Vertical
• Theme → Light
• Primary Color → #3B82F6 (example blue tone)
• Collapsible → True
• Select a Data Type → Dynamic
• Options → Select MenuData SQL Action

Using Properties in a Scenario Context

• Select a Data Type: Specifies the source of the menu data. Select Dynamic to connect the MenuData SQL Action.
• Direction: Specifies the direction of the menu. Select Vertical to display the menu vertically on the left side.
• Theme: Specifies the color theme of the menu. Select Light to display the menu on a white background.
• Primary Color: Sets the highlight for the selected menu item. When #3B82F6 (example blue tone) is selected, the active item appears blue.
• Collapsible: Makes the menu collapsible. When enabled, the menu collapses, showing only icons.
• Hamburger Control: Used to hide and show the menu on mobile devices. When collapsed, a three-line icon (hamburger menu) appears.

When the Scenario is Complete

• When the user clicks on the Products menu, the sub-items open: “Add New Product”, “Product List”, ‘Categories’

• When Categories is clicked, “Add New Category” appears below it.
• When the menu is collapsed, only icons remain.
• Clicking on the “Pricing” menu redirects to the /pricing page.
• The active menu item is visually highlighted in blue.

Limitations

• To use dynamic data in the menu, an SQL Action must be linked to the Options field.
• Multi-language support is only available for languages defined via the Languages panel.
• In collapsed mode, the menu opens with the hamburger control on mobile devices.

Tips and Best Practices

• Use descriptive icons for menu items.
• Carefully define the ParentId relationship in multi-level menus.
• Keep menu titles short and clear.
• Save space by keeping the Collapsible feature active on small screens.