Hamburger Menu

What is Hamburger Menu?

The Hamburger Menu is a side navigation menu that slides in from the left or right side of the app screen. It is commonly known as a Drawer Menu. This menu allows users to access different sections or pages of your app quickly and efficiently.

Follow the steps below to integrate the Hamburger Menu

1.) Add Hamburger Menu to the Right or Left Side of the Navigation Bar

Go to the Screen section and open Navigation Bar Buttons under the Navigation Bar settings. Add a button to either Left Side Buttons or Right Side Buttons, and select Hamburger from the popup options.

2.) Choose the Style of Your Choice

You can select from three default styles for your Hamburger Menu:

Style 1 : Left-aligned menu items, fully customizable in font size and color. Style 2 : Left-aligned menu items with icons and logo, a heading on top, and a close button at the bottom. Fully customizable in all aspects. Style 3 : Center-aligned menu items, customizable in font size and color.

After selecting your preferred style, click Next to proceed.

• Click "Next" after choosing your preferable style.

3.) Add Menu items

• Next is to start adding main items links in your hamburger menu.

• Click on "Add menu item" and add menu. You can add nested menu items(up to 1 level).

• You can see the changes in previewer. You can chose Android or iOS.

• Click "Next" once you are done adding it.

Add Menu Item Dialog

When you click on Add Menu Item, an Add Hamburger Menu Item dialog will open. Fill in the required details as described below.

Field	Description
Icon	Upload or select an icon that represents your menu item. The icon appears next to the title in the menu list.
Title*	Enter the name of the menu item (e.g., Profile, My Orders). This is a required field.
Menu Item URL*	Enter the URL that this item should open when tapped. The URL must begin with https:// (e.g., https://burgerhouse.com).
Visibility	Choose who can see this menu item: Logged-in users, Non-loggedIn User, or All users.
User	Define which users can access this menu item. Default is All.
Enable Firebase Analytics (Premium)	Toggle this option to track analytics events when users click on this menu item. Available only for Premium plan users.

You can preview the menu in real time on the right-hand side panel for both Android and iOS.

Once you’ve filled in the required information, click Next to proceed or Cancel to discard the changes.

Example: In the example below, the menu includes three items — Categories, Bread (nested under Categories), and Contact.

4.) Customize the Menu

The Customize section allows you to personalize the overall look and feel of your Hamburger Menu to match your app’s design and branding. Each option lets you control how the menu appears and behaves for your users.

Background Color

Set the background color of your Hamburger Menu. This defines the overall tone of the side panel and helps it blend seamlessly with your app’s theme.

Icon

Choose the main button icon that opens the Hamburger Menu. This icon appears on the navigation bar and serves as the entry point to your menu.

Close Button Icon

Select the icon that will be used to close the Hamburger Menu. It usually appears at the top or bottom of the side menu, depending on your chosen style.

Menu Text Size

Adjust the font size of the menu item labels to maintain consistency with your app’s typography and readability preferences.

Menu Text Weight

Define the font weight for your menu text. You can choose between Bold, Semi Bold, or Regular to match your visual hierarchy.

Menu Text Color

Set the color of the text for each menu item. This helps maintain contrast and readability against your chosen background color.

Menu Icon Size

Control the size of the icons that appear beside your menu items. Adjusting this ensures proper visual balance between icons and text.

5.) Save Your Setup

After completing all configurations, it’s important to ensure that your Hamburger Menu setup is saved properly so that none of your design or functional changes are lost.

Add Your Menu Configuration

Once you have finalized the menu design, styles, and items, click on Add to confirm your setup. This action saves your Hamburger Menu configuration within the project.

Save as Draft

After adding the menu, make sure to click Save as Draft. This step stores all your changes safely and allows you to revisit or modify the menu before publishing the app. It’s a crucial step to prevent any data loss during testing or editing.

Preview Your Menu

Once saved, you can preview your Hamburger Menu directly within the editor. Use the preview panel to check both Android and iOS views, ensuring that the design and functionality appear as expected on different devices.