Toggle Hamburger Menu Collapse is a UI Control action used to control the opening and closing (expand/collapse) of the hamburger menu component on the Kuika platform. This action was developed to simplify navigation and optimize user interaction in hamburger menu structures used on mobile or narrow-screen devices.

Technical Features

Dynamic Menu Control: Opens or closes the hamburger menu based on its current state:
- If the menu is open (expanded), it closes (collapses)
- If the menu is closed (collapsed), it opens (expands)
User-Triggered: Usually triggered by clicking on a hamburger icon. However, it can also be managed by another button, icon, or system event.
Web and Mobile Compatibility: Can be used in all mobile and web applications developed with Kuika. Ideal for hamburger menu management, especially in responsive designs.

Toggle Hamburger Menu Collapse Action Application Steps

1. Prepare the UI Design

Open your project on the Kuika platform.
Select or create a screen containing a hamburger menu from the UI Design section.
Add a Menu element and give it a name (e.g., hamburgerMenu).
Add an Icon or Button that will trigger the menu open/close function. (e.g., ☰ symbol)

Click on this element and add the UI Control > Toggle Hamburger Menu Collapse action by selecting the appropriate trigger event (Initial Actions, OnClick, etc.) from the +ADD ACTION menu.

Set the action parameters:

Parameter Name: Component to Change
Required: Yes
Description: The hamburger menu element that needs to be opened or closed.
Example: hamburgerMenu

The relevant menu element can be easily selected via the Symbol Picker.

Use Case: Mobile-Friendly Hamburger Menu

Scenario: Mobile users should be able to open the menu by clicking on the ☰ icon in the upper left corner of the screen and close the menu again with the same icon.

Application Steps:

Add a Menu element to the UI screen.
Place an Icon element.
- Icon: Hamburger (☰)
Define the following action for the icon:
- OnClick → UI Control → Toggle Menu Collapse
- Component to Change: hamburgerMenu

This structure allows users to easily open and close the menu and use the application area more efficiently.

Toggle Hamburger Menu Collapse Action Advanced Customizations

Conditional Display: The menu can only be opened under certain conditions or roles (e.g., only for logged-in users). Add Condition can be used for this purpose.
Status Indicator: Different icons or text can be displayed when the menu is open or closed to make it easier for the user to understand the menu status.

Technical Warnings

Clarify the initial state: Whether the menu is open or closed when it first opens should be determined in the UI design. If necessary, the initial view can be fixed with Change Visibility Of.
Responsive compatibility: The menu can be configured to appear as a hamburger on mobile devices and as a fixed side menu on desktops.

Toggle Hamburger Menu Collapse is an essential action for all applications aiming to provide a simple, flexible, and user-centric interface. It modernizes menu interactions on both mobile and web platforms, optimizes screen space, and simplifies navigation for users.