Ideal Mobile Navigations with Framer

In this article, we'll delve into the brilliant presentation given by Benjamin on YouTube, highlighting the new features designed in Framer to enhance mobile navigation. Eager to dive right in, Benjamin begins with a simple top bar navigation component. Though it works well and scales down on a desktop and tablet, the problematic issue arises when the links get truncated on a mobile phone screen. However, this problem can be easily rectified with the new features in Framer.

Designing an optimized mobile navigation

Benjamin demonstrates the process by double clicking to edit the component and design a mobile navigation. He already set up his desktop variant and now aims to design a mobile version. This involves tweaking the component - a hidden menu icon next to the logo, contained in a shared stack called 'top', which can be stretched out on mobile. Positioning it carefully, he then covers the icon again.

In the same stack, there are horizontal links spaced 20 pixels apart, each pointing to framer.com. These also include a covert grid containing a few images set to resurface when the phone menu is activated. One last element is a single pixel frame that forms the bottom border. As Benjamin zooms out, the next step becomes clear - a second variant is added. This variant allows the design of the mobile menu and is renamed to 'phone'. The width is set to 390, matching the default phone breakpoints. The design is beginning to shape up!

To vertical or not to vertical?

Once the hidden menu icon is made visible, the stack is stretched by setting the width to 'fill'. 'Space between' is chosen as the distribute property. Now the design is appearing even more like a mobile menu. The links are tweaked next - set to 'fill' the width, 'vertical' for direction, and 'start' for alignment. Adding a 10 pixel gap and padding leaves extra breathing room at the bottom. This ensures our links are not truncated in browsers like mobile Safari. Font size is increased, and our grid is made visible again. Voila! A desktop navigation is converted into a mobile navigation!

Collapse and expand: A tap away

However, there's more to be done. Ideally, the menu should be collapsed by default, and expand on tapping. With the 'phone' variant selected, a third variant is added to the component - aptly named 'phone open'. This represents the expanded state. The menu icon is set to the 'close' variant, symbolizing a component that animates two lines into an 'X'. The links are set to fade in, with opacity to zero. Once the height of the 'phone' variant is reset to fixed and resized to 64 pixels, the process is almost complete!

Effortless navigation

Animation between these two variants is a breeze. The menu icon acts as the trigger and with a click, one can easily cycle between the two variants. To ensure optimal functionality on mobile devices, a Max height of 100VH is set. This includes the viewport height of any device viewing it, and overflow is set to scroll. The 'overscroll' property is configured to be 'contain', which keeps the page behind from unwanted scrolling, improving overall user experience.

On top of these enhancements, previewing your interactive components has been made more convenient within the component canvas. This means one can get a real taste of the scrolling experience while designing high-quality mobile menus directly in Framer.