Back to all lessons
Lesson library

Navbar menu button

Use the navbar menu button to organize menu links on mobile devices.

 
This video features an old UI. Updated version coming soon!

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. Open Settings panel > Navbar Settings
  3. Choose to Show the menu
In the Navbar settings in the Settings panel, the Menu option is highlighted and set to Show.

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 it
  2. Open Settings panel > Navbar Settings
  3. Use the device options slider to choose where the Menu button first appears
In the Navbar Settings section of the Settings panel, the device options slider is highlighted with the Tablet breakpoint currently selected.

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 Settings panel.

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.

The dropdown nav menu is shown under the navbar, stretching across the full length of the browser window.

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.

The over right nav menu is shown on the top right side 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.

The over left nav menu is shown on the top left side 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.

In the Navbar Settings section of the Settings panel, menu easing options are shown for menu open, menu close, and ease duration.

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 the button’s background color.

  1. Select the menu button
  2. Open Style panel > Backgrounds
  3. Click the swatch to open the color picker and choose a color

Styling the icon

You can also style the menu icon using typography settings. The icon will inherit these typography styles from its parent element, the menu button.

To change the size of the menu icon:

  1. Select the menu button
  2. Open Style panel > Typography
  3. Change the Size to make the menu icon larger or smaller

You can also change the color of the menu icon by adjusting the font color.

To change the color of the menu icon:

  1. Select the menu button
  2. Open Style panel > Typography
  3. Click the swatch to open the color picker and choose a color
Note: The contents of the button are customizable. The menu 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 the state of the menu (Show or Hide). When you have Show menu enabled, and make a style change to the menu button OR add a class to it, a special “Open” class is automatically 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.

A “Menu button” class and an “Open” class appear in the Selector field of the Style panel.
Try Webflow — it's free