Twinr Builder Resources
  • 🙌Getting Started
    • What is Twinr?
    • Fun Fact
  • 📱Create App
    • Create App from Template
      • Blank
      • E-Commerce App
      • News App
      • Restaurant App
  • 👥Organization
    • Create Organization
    • Invite Members
  • 🖥️Dashboard
    • App Dashboard
    • Preview App
    • Delete App
  • 📲Setup Branding Info
    • App info
    • Launch screen
    • App Permissions
      • Camera Permission
      • Photo Library Permission
      • Microphone Permission
      • App Tracking Transparency
      • Location Permission
      • Read External Storage
    • App Settings
      • Enable portrait only mode
      • Prevent App Sleep
      • Enable/Disable iPad Support
      • Customize Minimum Android Version
  • 🎨Setup Theme
    • Overview
    • Bottom Tab bar
    • Navigation bar
      • Button setting
    • Status bar
  • 📲Screen Customization
    • External URL Handling
    • Apply Custom CSS
    • Apply Custom JavaScript
    • Hide Elements
    • Page Refresh
    • Login
      • General
      • Login Page
    • Tab bar(Bottom tabs)
      • Add New Screen
      • Delete Screen
      • Rearrange Screen
      • General
      • Navigation Bar
        • Navigation Bar Title
        • Navigation Bar Buttons
          • Back Button
          • Linker Button
          • Cart Button
          • Custom Button
          • Hamburger Menu
          • Native Link Sharing
          • Native Notification Screen Button
      • Tab Screen - External URL Handling
      • Responsible URL
      • Tab Screen - Hide Elements
      • Tab Screen - CSS
      • Tab Screen - Scripts
  • 🛠️App Configuration
    • Add New Configuration
  • 🔗Extensions
    • Overview
    • Page Loader
    • Pull to Refresh
    • Custom User Agent
    • Custom Fonts
    • Cache Policy
    • No Internet View
    • App Review
    • App Onboarding
    • Multi Language
    • In-App Purchase (IAP)
      • iOS In-App Purchase (IAP)
      • Android In-App Purchase (IAP)
    • Deeplink
    • Force App Update
    • Account Delete
    • Dynamic Titles
  • ⚙️Integrations
    • Overview
    • Firebase Push Notification
      • Enable Push Notification
      • Send Push Notification
    • Push Permission Reminder
    • Personalized Push Notification
    • Abandoned Cart Push Notification
    • Native Notification Screen
    • AdMob
      • Create Android & iOS Apps
      • Create Ads on AdMOb
      • Setup AdMob Integration
    • Firebase Analytics
      • Auto Tracked Analytics
      • Custom Analytics
      • How to check Analytics in Firebase?
  • Plugins
    • Overview
    • WooCommerce
    • Shopify
    • Preshtashop
  • Engage
    • Overview
    • Engage Dashboard
    • One Time Campaigns
    • Event Triggered Campaigns
      • Order Created
      • Order Status Change
      • Product Created
      • Product Re-stock
      • Product Out-of-stock
      • Product Low Stock
      • Coupon Created
    • Welcome Push Notification
    • Inactivity Push Notification
  • 📊App Analytics
    • Overview
    • Acquisition & Retention
      • Number of Sessions
      • Number of Unique Sessions
      • Daily Active Users
      • Total App Sessions
      • New App Sessions
      • Session by Platform
      • Average Session Length
      • Session by Devices
      • Retention
    • Revenue
      • Sales
      • Orders
      • Total Revenue - Current vs Previous Period
      • Total Orders - Current vs Previous Period
      • Revenue by Device
      • Average Order Value by Device
      • Order by Device
      • Orders by New vs. Returning Users
      • Top 10 Popular Products
      • Promo Code Revenue vs Revenue
  • JS Bridge
    • What is the JS Bridge?
    • AdMob Interstitial Ad
    • Change App Language
    • Push Notification - Device Token
    • Request Account Delete
    • Native Datastore
  • 🚀Publish Apps
    • Publishing to the Google Play Store
      • Setup Android Signing Information
      • Get Android Build File
      • Create Your Google Developer Account
      • Setup your App on Google Play Store
      • Submit Your App to Production
      • Reset Android Signing Key
    • Publishing to the Apple App Store
      • Create Your Apple Developer Account
      • Setup Annual Payment for your Apple Developer Account
      • Create Your Apple Bundle ID
      • Setup iOS Signing Info
      • Get iOS Build File
      • Add Users to Your App Store Connect Team (Optional)
      • Add Users to TestFlight (Optional)
      • Submit Your Build to The App Store
  • 👤Twinr Account
    • Change Password
    • Billing & Payments
    • Invoices
    • Update Payment Method
    • Enable 2-Step Authentication
  • 👩‍💼Support
    • Contact Support
    • On-demand Services
      • End-to-End App Solution(All Inclusive)
      • App Development
      • App Publishing
      • App Screenshots
      • Login Script
      • Push Notification Setup
  • 🤝Partnership & Earnings
    • Twinr Partnership Model
    • Agency Plan
    • Become an Affiliate
  • ❓FAQs
    • Subscription
    • Preview your App
    • App Customization
    • Build APK & IPA
    • Publishing App
Powered by GitBook
On this page
  • What is Hamburger Menu?
  • 1.) Add Hamburger Menu to the Right or Left side of Navigation Bar
  • 2.) Choose the style of your choice
  • 3.) Add Menu items
  • 4.) Customize
  • 5.) Click on Add
  • 6.) Don't Forget to click on Save as a Draft!

Was this helpful?

  1. Screen Customization
  2. Tab bar(Bottom tabs)
  3. Navigation Bar
  4. Navigation Bar Buttons

Hamburger Menu

PreviousCustom ButtonNextNative Link Sharing

Last updated 2 years ago

Was this helpful?

What is Hamburger Menu?

It is a side menu which toggles from left or right side. It is often called as a Drawer Menu.

Follow Below steps to integrate Hamburger Menu.

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

  • Go to screen section and go to Navigation Bar Buttons from Navigation bar section.

  • Add a button in "Left Side Buttons" or "Right Side Buttons" and select "Hamburger" from the popup.

2.) Choose the style of your choice

  • We have 4 styles by default.

  • Style 1 has left aligned menu items which is fully customizable in font size and color.

  • Style 2 has left aligned menu items with icons and logo, with heading on top and close button in bottom. It is fully customizable.

  • Style 3 has left aligned menu items with icons and a different animation to open and close which is fully customizable.

  • Style 4 has center aligned menu items which is fully customizable in font size and color.

  • 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.

4.) Customize

  • Here, we will customize the look.

  • Background color is the color of the side menu.

  • Icon is the button icon you want to show to open the hamburger menu.

  • Close Button Icon is the icon for "closing the hamburger menu.

  • Menu Text Size is the size of menu fonts.

  • Menu Text Weight is the weight of the menu font. You choose "Bold", "Semi bold", "Regular"

  • Menu Text color is the font color of Menu items.

  • Menu Icon Size is the size of the icons you have given on left size of menu items.

5.) Click on Add

6.) Don't Forget to click on Save as a Draft!

📲