# 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. ![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FsMvdjMZOrDVF0WCHy45W%2Fhebargar_menu%20\(2\).gif?alt=media\&token=714c4a3b-c26c-44b6-837c-ad4690d9f53b) 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. ![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FJ66YRNQHIm7PmxMFCa1B%2FScreen%20Shot%202022-08-11%20at%204.09.29%20PM.png?alt=media\&token=2ea948d6-caf4-43cb-99b0-7624156fe468) ### **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. ![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FODf5IDafCkSJDPq8IEe7%2FScreenshot%202025-10-10%20at%201.09.22%E2%80%AFPM.png?alt=media\&token=e3366aaa-b4d5-45b9-8654-fe4c8053d1da) ### **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. ![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2Fe7iaUPVBT4sxAT1nNGTX%2FScreen%20Shot%202022-08-11%20at%204.19.26%20PM.png?alt=media\&token=1c27c6d3-3538-4d1d-89d9-70b1c1863557) ![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FgcjeClG0eJlvKhgAPku2%2FScreen%20Shot%202022-08-11%20at%204.36.39%20PM.png?alt=media\&token=31f82b3d-4ac2-4dfb-8086-feb68cb03fbd) #### 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. ![](https://3731994945-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MlBy5z08zL1UoCwNqmg%2Fuploads%2FBfqcxX3w8TxRnBqTWCyn%2FScreenshot%202025-12-18%20at%202.38.53%E2%80%AFPM.png?alt=media\&token=8cb13496-dde6-48e0-944a-9da7624aab01) ### Styles #### Background Color Choose the background color of the hamburger menu panel. * Select from predefined theme colors (Primary, Body, Background, etc.) * Or choose **Custom** and enter a HEX color code * Opacity can be adjusted (100% = fully visible) *** #### Menu Icon * **Icon**: Upload the icon used to open the hamburger menu\ Supported format: `.svg` * **Close Icon**: Upload the icon shown when the menu is open\ Supported formats: `.png`, `.jpg`, `.jpeg` *** ### Visibility Control who can see the hamburger menu in your app. * **User** * All users * Logged-in users only * Logged-out users only This helps tailor navigation based on authentication state. *** ### Expand / Collapse Icons Customize the icons used to expand and collapse menu sections. * **Expand Icon**: Icon shown when the menu can be expanded * **Collapse Icon**: Icon shown when the menu is expanded * **Expand/Collapse Icon Size**: Set icon size in pixels for consistent appearance Supported formats: `.png`, `.jpg`, `.jpeg` *** ### Menu Text Control the appearance of text inside the hamburger menu. #### Text Style * Choose from predefined styles (Heading, Body, Label) * Select **Custom** to manually control typography *** #### Font Size & Weight * **Font Size**: Set text size in pixels * **Font Weight**: Choose Regular, Medium, or Bold to control emphasis *** #### Font Style (Premium) * Select a custom font family for menu text * This option is available **only for Premium plans** *** #### Text Color * Choose from theme colors or set a **Custom HEX color** * Adjust opacity to control text visibility *** #### Menu Icon Size * Define the size of icons shown next to menu items * Helps maintain visual balance between text and icons ### **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.