Navbar Menu button

 

The menu button is an element inside the Navbar that organizes the nav links when there is limited horizontal space, like on a mobile device. It is sometimes referred to as the “hamburger menu”.

The menu button and its functionality are built into the Navbar element, and can be accessed and configured in a number of ways. We’ll cover four aspects of the menu button:

  1. Triggering the menu
  2. Device visibility
  3. Menu animations
  4. Styling the menu button

Triggering the menu

By default, the nav menu button appears on Tablet breakpoint and below. You can go to preview mode and see the menu appear in your navbar when you switch to these devices. Clicking that menu button will expand the nav menu and clicking the button again collapses the nav menu.

On the Desktop breakpoint, you can see that the nav links are nested inside the nav menu element. This nav menu is the same element that displays when the menu button is clicked—it just displays the nav links in a vertical list.

Triggering the menu in the Designer

You can open the nav menu in the Designer with the following steps:

  1. Select the Navbar, or any element inside it
  2. Go to the Element Settings and press Open Menu
  3. The Designer will automatically switch to the Tablet breakpoint and the menu will open
 

Device visibility

By default, the Navbar menu button appears in the Tablet breakpoint, but this can be changed. The button can be made visible on all breakpoints or none at all. Follow these steps to change the visibility:

  1. Select the Navbar or any element inside the Navbar
  2. Go to the Element Settings
  3. Use the device options slider to select where the menu button first appears
 

Menu animations

There are three types of reveal animations that can be used for the menu:

  1. Drop down
  2. Over right
  3. Over left

You can select the reveal animation in the Element Settings of the Navbar.

Dropdown

This is the default menu type. When the menu button is clicked, the nav menu will drop down from the Navbar. The nav menu will take up the full width of the browser window by default.

 

Over Right

When this menu type is selected, the nav menu will move over from the right side of the screen when the menu button is clicked. Note that this menu type will take up the full height of the browser window.

 

Over Left

This menu type is the same as Over Right, except the nav menu will move from the left. This menu type will also take up the full height of the browser window.

 

Menu easing and transition

For all these menu types, you can control the type of easing curve that's used to animate the open and close transitions. You can also adjust the duration of the transition.  

Styling the menu button

You can style any aspect of the Navbar or the nav menu. Since styles cascade down from larger breakpoints, select the highest breakpoint that you have the Navbar menu button enabled and then add styles.

Styling the button

When in tablet view, for instance, you can select the menu button and set a color for the background.

 

Styling the icon

You can also style the menu icon using typography settings. With the menu button selected, you can change the size of the menu icon by adjusting the font size. You can also change the color of the menu icon by adjusting the font color. The icon will inherit  these typography styles from its parent element, the menu button.

 

The contents of the button are customizable. The icon can be deleted and replaced with a custom image or a text element

Styling the open state

The appearance of the menu button can be customized based on if the menu is closed (default) or open. When you add a class to the menu button element and have the Open Menu enabled, a special Open class is added in the selector field.

Similar to how styling works on the default state you can apply background and typography styles on the menu button to change the background color and icon color.