Framer
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support

Magic Motion

Animated Tabs
Card List
Card Paging
Container Transitions
Dynamic Grid
Expand on Tap
Image Gallery
Image Gallery 2
Magic Motion
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Box
Side Menu

Components

Input Form
Loading Indicator
Radio Button Form
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Drop on Scroll
Nested Scroll
Star Rating
Swipe Menu
Switch Sheet
Tab Menu
Wheel Picker

Effects

Cover Flow
Cube Effect
Flip Effect
Parallax Scroll
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Carousel
Custom Effect
Drag Handle
Dynamic Header
Image Panning
Input Data
Input Validation
Like Animation
Like Counter
Lock Screen
Long Press Menu
Perspective 3D
Progress Bar
Scroll Progress
Show Password
Slider
Stories: Drag
Stories: Tap
Toast Prompt

Side Menu

Open in Framer to interactPreview this example

Learn to use the Link tool's Overlay transition to hide and show a mobile menu.

Open in FramerPreview Example

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.

Resources
  • Interactions Support
  • Transitions Support
  • Talk about this on Discord

Framer

  • Updates
  • Pricing
  • Tutorials
  • Teams
  • Enterprise
  • Blog
  • Motion

Platforms

  • Web
  • macOS
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing
  • User Testing
  • Desktop PrototypingNew

Resources

  • Examples
  • Sessions
  • SpeedrunsNew
  • Packages
  • Volt
  • API
  • State of Prototyping
  • Wireframing Tool
  • Mockup Tool
  • Dictionary

About

  • Loupe
  • Community
  • Company
  • Careers
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement