Use the navbar menu button to organize menu links on mobile devices.
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:
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.
You can open the nav menu in the Designer with the following steps:
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:
There are three types of reveal animations that can be used for the menu:
You can select the reveal animation in the Settings panel.
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.
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.
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.
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.
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.
When in tablet view, for instance, you can select the menu button and set the button’s background color.
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:
You can also change the color of the menu icon by adjusting the font color.
To change the color of the menu icon:
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.