Side Menu

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

Learn more about sidebar navigation menus

In mobile design, a side menu—also known as a mobile sidebar menu, side navigation menu, side panel, sidebar navigation drawer, side navigation bar, 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 side navigation bars require some kind of 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.

Top vs. side navigation menu

When deciding on a navigation scheme for your app or website, it’s important to figure out the best way to help your customers navigate the layout.

Although top navigation is perhaps the most common for websites, research from Jennifer Rose Kingsburg at San Jose State University studied customers’ preferred layouts for three-level menu navigation structures. The study found that side navigation menus were the most favorable for user navigation.

Sidebar navigation also tends to be easier to scan. Research indicates that people scan both app layouts and web pages in an F pattern. When reading texts like lists, people’s eyes scan left to right, then up and down, which is where a responsive sidebar menu comes in.

By designing navigation menus that fit with how users scan text, sidebar menus help users digest information quickly, in a way that feels natural.

Sidebar menus are also more scalable—you can show far more navigation links above the fold with a separate menu can be differentiated from the body text by font and device settings. You can often accommodate more items in a side menu than a top menu; most text languages run left to right, after all, which only gives you so much room if you’re listing them in a top menu. Put it on the side and it can read like a regular list.

How to create a sidebar navigation menu in Framer

In Framer, you can create a sidebar menu using 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.