Side Menu

In this example, you’ll learn to create a menu overlay using a Navigate action.

Learn more about Side Menus

In mobile design, a side menu—also known as a sidebar, side panel, navigation drawer, off-canvas menu or hamburger menu—is a common place to put a design’s secondary content, such as navigation links, shopping cart preview, information about the logged-in user, and other optional functions. While the pattern pre-dates mobile devices, it gained popularity with Facebook’s first mobile web application.

A side menu often acts as a modal layer: once opened, a user must either interact with the menu or close the menu before they can again interact with the screen’s primary content.

Because a side menu requires some user action to reveal, placing content in a side menu can greatly reduce that content’s discoverability. For this reason, avoid putting critical items in a side menu. Consider instead alternative patterns such as tabs for core navigation or floating action buttons for important user actions. Many designs also repeat the content of a side menu in the footer of each page.

How to create it in Framer

In Framer, a side menu is a Navigate action that uses the Overlay transition to show a frame that has the same height, but less width, than the previous frame. Add a Scroll to this overlay Frame to expand the area available for content.

You can configure the transition to come in from either the left or right sides. You can also decide on the color and opacity of the overlay’s background. Remember that this background color is more than just decorative: it hints that tapping on the background will close the menu.