Using the Burger Menu

Learn how to add and customize a Burger Menu element

Diego Muralles avatar
Written by Diego Muralles
Updated over a week ago

The Burger Menu element is a popular design element that is often used on mobile devices. This menu is represented by three horizontal lines or bars, resembling a hamburger, hence the name "Burger Menu". It typically appears as an icon in the upper corner of the screen and can be clicked or tapped to reveal a hidden navigation menu.

Adding a burger menu

  • From the top menu bar, click on the Add Menu (Shortcut: M)

  • Search for and select Burger Menu

  • Click and drag the element onto your canvas

Tip: Pin the menu to the necessary pages at the top of the styles panel.

Link types

When adding a menu item, you'll be able to select from a range of links; some settings may change depending on which link type you choose, so it's essential to understand what each one does before starting to set up your menu.

Link Type

Description

Configuration Options

Page

Links to internal pages in your project

Go to page: a dropdown menu from which you can select the page to which you want to link

Animation: a listing of animations to transition from one page to another

Element

Links to a specific element or section in your project

Widget select: a dropdown menu from which you can select the element to which you want to link (you must give widgets names in the layers panel so they show up).

External

Links to an external URL

External URL: The field where you must put the URL

Open in a new tab: Toggle to open the URL in a new tab

Add rel=nofollow: Toggle to add rel=''nofollow'' attribute to your link

Add rell=sponsored: Toggle to add rel=''sponsored'' attribute to your link

Email

Redirects the user to Gmail with the specified email address as the recipient

Email: The field where you must write the recipient's email address

Subject: The field where you must write email's subject

Phone

Redirects the user to make a phone call

Phone: The field where you must write the phone number

File

Allows the user to download a preloaded file

File to be downloaded: Click to upload the file from your PC

Target: Choose the redirection's behavior (download, open in a new tab, or open in current tab)

Download filename: The field where you must write the file's name

Setting up a Burger Menu

Adding a menu item

  • Double-click the Burger Menu

  • Click on Add menu item

  • Write the item's name in the Label field

  • Choose the link type from the Link type dropdown menu

  • Set up the link type you've chosen (refer to the Link Types section above)

To add all of the necessary items, repeat these steps as many times as needed. If you need to edit a setting, click the Pen icon next to the item's name to enter the options.

Adding a submenu item

  • Double-click the Burger Menu

  • Click and hold the equal icon (=) next to the menu item you want to move

  • Drag it below the primary item you

Arranging the menu item's order

The navigation pager order is affected by the order of your menu items in the list. Follow the steps below to arrange them when needed.

  • Double-click the Burger Menu

  • Click and hold the equal icon (=) next to the menu item you want to move

  • Drag it up or below the item you need

Styling a Burger Menu

  • Background:

    • Container: Change the Burger Menu background color

    • Sidenav: Change the Side Navbar background color

    • Sub menu: Change the Sub menu item's background color

    • Menu Item: Change the menu item's background color

    • MenuItemHover: Change the menu item's background color on hover

    • Menu Item Active: Change the menu item's background color when selected

  • Text:

    • Burger Icon: Change the burger icon color

    • Menu Item: Change the Menu item text's color and size

    • Menu Item Active: Change the Menu item text's color and size when selected

    • MenuItemHover: Change the Menu item text's color and size on hover

    • Sidenav: Style the menu items' text and set the arrow and close icon's size

    • Sub menu: Style the Submenu item's text

  • Margin: Add margin to the Close button

  • Padding: Add padding to the element's container, menu items, and submenu items.

  • Border: Set a border color, opacity, and line weight for the element's container, menu items, submenu items, and the side navbar

  • Border Radius: Curve the radius of the border of the element's container, menu items, submenu items, and the side navbar

  • Effects: Add different types of shadows or blur effects to the element's container, menu items, submenu items, and the side navbar. Learn more about effects

  • Opacity: Adjust the transparency of the element's container, menu items, submenu items, and the side navbar

  • Transform: Change the Side navbar's width and height

  • Icons:

    • Set custom shape: Replace the default icons with a shape or a custom SVG

    • Set custom image: Replace the default icons with an image

Did this answer your question?