(function openLouie() { let louie = document.getElementById("Dropdown-Toggle-14"); louie.classList = "host-toggle w-dropdown-toggle w--open"; console.log(louie); })();
Left Menu Screen Design

You can switch between screens in web and mobile applications by creating a menu.

In Kuika, a drop-down menu coincides with a screen. Therefore, you can create the menu on a new screen. With the drawer navigation, you can also enable the menu to be opened from any of the four sides of the screen.

Create a new screen with the name Left menu. Adjust the screen width according to the width you will use for the menu. Drag the handle in the middle of the right edge of the screen to the left to make it the appropriate width. You can see the width detail on the ruler that opens at the bottom.

You can add a header section to the menu that will open. With the Elements panel, first, drag the header element and then the row element into it. Convert the row element to 2 columns. Next, add a label element to the left column. Drag an icon element to the right column. Change the text to Menu by selecting the Label element. If you want to give a special font style, you can use the Typography section from the Styling panel.

Now let's edit the icon we will use to close the menu. Select the icon element, and replace it with properties with a close or left arrow type icon. Icons in Kuika feed on the font and have material design style icons. You can change its Color or size from the Typography section of the Styling panel.

Now let's add the menu items. Add a row element to the screen and convert it to a single column. We will prepare a menu with icon and menu item text. First, add a spacer element in the column to be able to adjust its spacing. Then add the icon and label element to it. Select the Spacer element and check that the spacing of the two elements is 12px. You can adjust the spacing with the size section.

Select the icon element and replace the icon with a dashboard-type icon using properties. Type Dashboard in the text of the label element next to it. We've added our first menu item. You can edit the properties of icon and label element, such as color and size, using the Typography section of the styling panel.

And then, select the row element and multiply it with duplicate. Add other menu items by changing the properties of the icon and label elements.

You should use navigation actions to ensure that when we click on one of the menu items, it can switch to the relevant screen. Let's add the first function to the close icon. Select the icon element and add the GoBack navigation from the properties panel and save. Thanks to this navigation, the relevant menu will return to the relevant screen no matter which screen is opened.

When navigating to menu items, it would be better to give it to its parent row element, not the item name. Thus, the click area for users will be a larger surface. Select the Row element, which is the parent of the Dashboard menu item. Add the navigation action. In order to open the screen selected in the menu directly, select the Current screen and the screen to be opened from the list.

Similarly, add navigation actions to other menu items as well.

Switch to the Dashboard screen to enable the Left menu to be opened from the left edge. We want it to open when the hamburger menu icon in the header section of the Dashboard screen is clicked. Give the hamburger icon a Navigation action. Add action by entering Drawer in opening type, left in direction and width value.

Now generate the application with the preview button. When I click on the hamburger menu on the dashboard screen that opens, the menu opens on the left side. It closes with the Close button. When I select one of the menu items, we see that it switches to the relevant screen.

Simplicity Meets High Performance

Free edition subscription
Keep your work
No credit card required to try