Scroll

Navigations: Horizontal Side Scroller

Benjamin

3:02

30K views

Jul 6, 2023

About this lesson

This release brings new properties that unlock new types of navigation patterns in Framer. First, we’re adding separate Overflow X and Overflow Y properties, giving you much more control. Second, we’re adding the Scrollbars property, enabling you to show or hide scrollbars of specific layers. Combined, these new styles allow you to design completely responsive navigations without variants. Watch the video above to learn more, or remix our demo to get started: https://navs-scroll.framer.wiki/

🌞 Try Framer for free: https://framer.com

🎉 Follow on Twitter: https://twitter.com/framer

💎 Join Community: https://www.framer.community

0:00yo my name is Benjamin and in this video 0:03I'm excited to introduce two new 0:06properties that unlock new types of 0:09navigations in framer 0:16so let's Dive Right In 0:19here in our demo project we have a 0:22simple navigation component with 0:25position set to fixed and it's pinned to 0:29the top left and right edges we'd like 0:32this to become a side-scrolling 0:34navigation on mobile and you can see 0:37that we already have a gradient that 0:40Fades out the overflowing links if we 0:43preview this we can see that nothing is 0:46scrolling just yet so let's dive into 0:48the component and make this a scrollable 0:52navigation on a mobile we don't have nor 0:55will need any variants in this component 0:58we only turned it into one for 1:01reusability purposes let me quickly walk 1:04you through the setup here first we have 1:07these two small gradient layers at the 1:10opposite ends and they will overlap the 1:12links on mobile indicating that this is 1:15a scrollable navigation next we have 1:17this bar that contains the logo and the 1:21title and below that we have a stack 1:23with our links and this is the layer we 1:26want to make scrollable on mobile or 1:29whenever the links overflow so with this 1:32layer selected we can head over to the 1:35Styles menu in the property panel and 1:38add one of our new properties we now 1:41support the Overflow X and overflow y 1:44properties unlocking new types of 1:47navigation patterns so here we can add 1:50the Overflow X property and make sure 1:53it's set to scroll a second new property 1:57that we added is the scroll bars 2:00property and this one allows you to show 2:03or hide the scroll bars on any given 2:06layer so for our horizontal scroller 2:09here we can set it to hide 2:12and that's pretty much all there is to 2:15it we can now go back to the home page 2:18and preview our phone breakpoint 2:22and using a trackpad we can validate 2:26that our menu is horizontally scrollable 2:29and no scroll bars appear 2:32and this pattern Works especially well 2:34on mobile devices 2:37and that's pretty much it for this video 2:40thank you so much for watching and stay 2:43tuned for more Navigation updates coming 2:46soon 2:51foreign 2:55foreign

TeachesSticky & Fixed

Also coversBreakpoints Component Variants Components Links Sizing Stacks Validation

Watch on YouTube ↗

‹ Framer Community Show & Tell July 6, 2023—Cédric Moore, Madhuri Maram and Arjun Phlox

Navigations: Mobile Menus ›