How To Build A Hamburger Menu In UI Builder

A hamburger menu is a common UI element, particularly for mobile and tablet design. Hamburger menus allow the user to easily show and hide a site or application’s main navigation menu to preserve screen real estate.

In this article, we will walk you through the basic steps for setting up a simple hamburger menu in UI Builder. You will see, step-by-step, how to create your own hamburger menu.

We will also walk through how to optimize the menu to be responsive; that is, make it only appear on mobile and tablet views.

Check out a demo of the hamburger menu we will be building.

To get started, you must have a Backendless account. You can sign up for free here.

Hamburger Menu Structure

Let’s start building a hamburger menu by creating a component structure on the User Interface tab.

UI Builder in Backendless

The general structure of the component is shown below. For clarity, element IDs are named the same as classes. Each ID must be given a unique name.

Burger Menu component structure

As a result, we will get a scheme like this (note: in the screenshot, the styles described below have already been applied):

Burger Menu component structure on page

For header, header__burger, and header__menu, we will use the Block component.

Block element in UI Builder

Use the Text component for header__burger-item.

Text element in UI Builder

Use the Link component for each header__menu-link.

Link element in UI Builder

After adding content to our Block, let’s reset the styles using blue crosses.

Reset block element styles in UI Builder

Reset block element styles in UI Builder 2

Reset block element styles in UI Builder 3

Also, when adding elements, be sure to specify its ID and class.

Set ID and class of block element in UI Builder

Styles

To create styles, switch to the Theme tab. Inside the page, select the Editor and Extensions tabs.

Edit Theme in UI Builder

Create an Extension. We recommend you name the extension according to the component name for convenience.

The following code is written using CSS LESS.

.header {
  position: relative;
  &__burger {
    width: 30px;
    height: 20px;
    position: absolute;
    top: 20px;
    left: 30px;
    z-index: 2;
    &:before,
    &:after,
    .header__burger-item {
      content: '';
      background-color: #000000;
      position: absolute;
      width: 100%;
      height: 2px;
      left: 0;
      transition: all 0.3s ease;
    }
    &:before {
      top: 0;
    }
    &:after {
      bottom: 0;
    }
    &.active .header__burger-item {
      transform: scale(0);
    }
    &.active:before {
      transform:rotate(45deg);
      top: 9px;
    }
    &.active:after {
      transform:rotate(-45deg);
      bottom: 9px;
    }
  }
  &__burger-item {
    top: 9px;
  }
  &__menu {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1rem);
    top: 50px;
    left: 30px;
    flex-direction: column;
    background-color: #7db6e670;
    padding: 10px;
    width: 200px;
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s;
    &.show {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
      transition-delay: 0s, 0s, 0.2s;
    }
  }
  &__menu-link {
    padding: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
    &:hover {
      color: #2e5a81;
      text-decoration: underline;
    }
  }
}

Responsive

Responsive Demo

If you want to use this menu only on tablets and mobile devices, you need to add the visibility of elements by breakpoints:

.header {
  position: relative;
  &__burger {
    width: 30px;
    height: 20px;
    position: absolute;
    top: 20px;
    left: 30px;
    z-index: 2;
    @media (min-width: 768px) {
      width: 0px;
      height: 0px;
    }
  }
  &__menu {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1rem);
    top: 50px;
    left: 30px;
    flex-direction: column;
    background-color: #7db6e670;
    padding: 10px;
    width: 200px;
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s;
    @media (min-width: 768px) {
      position: relative;
      flex-direction: row;
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
      top: 0;
      left: 0;
      width: 100%;
      justify-content: space-between;
    }
  }
}

These breakpoints are written using the mobile-first method.

Logic

Next, we describe the logic for the appearance of the menu, and change the appearance of the hamburger – by clicking on the header__burger element.

To do this, click on the element, then on the puzzle icon.

Edit codeless logic of block element in UI Builder

Then add the Codeless logic for adding and removing element classes on click.

Codeless logic for block element

Let’s walk through what this logic is doing, in plain English.

  1. First, we have an “if” statement. The program looks at the classes for the element header__burger.
  2. If the assigned class is active, then the program performs the “do” portion of the if function. In that section, the program removes the class active, causing the header__burger and header__menu to become inactive.
  3. If the assigned class is not active, then the program performs the “else” portion of the if function. There, it adds the class active to both header__burger and header__menu, making them both active.

Done! Now you know how to quickly and easily create a hamburger menu for your application using Backendless UI Builder.

Thanks for reading, and as always, happy codeless coding!

1 Like

I am almost there doing this. I believe I have followed your instructions well. There is something I am doing wrong in the styling I think?

The burger does change to an X and back when clicked on.
image image

But the links are not showing when clicked

image

What should I do?

Hello @Andreas_Marinopoulos!

Could you provide me with your App ID?

Regards,
Alexander

Sure @Alexander_Pavelko

4A47197B-AE30-FA84-FF56-0071F4010900

What page is the dropdown on?

tutor_dash

I have found a bug. You need to add two classes: “active” and “show”. Just replace “active” with “show” and everything will work correctly.

Regards,
Alexander

thanks!

I am using a header block to house my header items. The hamburger dropdown is on the inside of the header block. Is there a way to make it go on the outside, using Z index or something?

You can remove z-index of this block and everything will work.

Regards,
Alexander

Thanks!

Is it also possible to trigger a visibility change using the hamburger icon? For example, if I wanted to reveal a second subheader block when the hamburger is clicked, would I need to modify the CSS or simply deleat the CSS for the drop down menu and add logic to the On Click Event of the hamburger?

When you click on a hamburger, you change the visibility of the item by adding the “show” class. You can initially hide any element and add the “show” class in the onClick handler to make it visible. I hope I understood you correctly, if not, feel free to ask your question again.

Regards,
Alexander

1 Like

Hi Team,
Can you please help? I am having hard time with menu. Hamburger is not lining up properly.


when i activate it
image

my app id is 94496922-170D-4236-FF64-228CA5F5DE00

Hello @Sanjay_Christian,

Please follow all the instructions described above.
It seems like you didn’t make these changes:

reset the styles using blue crosses

and therefore the header__burger has incorrect sizes.
After reseting styles everything should be fine:

and

Regards,
Olha