Guide
- How-to
- Responsive navigation
Guide
- How-to
- Responsive navigation
Guide
- How-to
- Responsive navigation
How to Create a Responsive Navigation in Framer
Learn how to build a fully responsive navigation bar. You'll discover how to use components and variants in Framer, along with interactions, to make elements responsive on your site.
Posted by
Nandi
Table of contents
Creating the base of the navbar
First, let's set up the foundation for our navbar:
Press F on your keyboard to create a new frame.
Resize it to resemble a navigation bar and set its position to fixed so that it stays visible as you scroll.
Pin it to the top by setting left, right, and top pins to 0.
Change the background color to something suitable (e.g., a neutral gray).
Add a logo, navigation links, and a button inside the frame.
Convert the navbar into a stack so that the elements inside have relative positioning.
Creating the base of the navbar
First, let's set up the foundation for our navbar:
Press F on your keyboard to create a new frame.
Resize it to resemble a navigation bar and set its position to fixed so that it stays visible as you scroll.
Pin it to the top by setting left, right, and top pins to 0.
Change the background color to something suitable (e.g., a neutral gray).
Add a logo, navigation links, and a button inside the frame.
Convert the navbar into a stack so that the elements inside have relative positioning.
Creating the base of the navbar
First, let's set up the foundation for our navbar:
Press F on your keyboard to create a new frame.
Resize it to resemble a navigation bar and set its position to fixed so that it stays visible as you scroll.
Pin it to the top by setting left, right, and top pins to 0.
Change the background color to something suitable (e.g., a neutral gray).
Add a logo, navigation links, and a button inside the frame.
Convert the navbar into a stack so that the elements inside have relative positioning.
Navbar base as a frame.
Navbar base as a frame.
Navbar base as a frame.
Now, we have a static navbar! Next, we’ll add more elements we’ll need on the mobile variant.
Creating a menu icon component
On mobile, we need a menu button that toggles the navigation links. Here’s how to create it:
Draw a small frame and remove its background color.
Inside that frame, add two thin horizontal rectangles (these will be the hamburger menu lines).
Duplicate one of the lines and move it down slightly to form the classic menu icon.
Convert this into a component and create a second variant for the close icon.
Now, we have a static navbar! Next, we’ll add more elements we’ll need on the mobile variant.
Creating a menu icon component
On mobile, we need a menu button that toggles the navigation links. Here’s how to create it:
Draw a small frame and remove its background color.
Inside that frame, add two thin horizontal rectangles (these will be the hamburger menu lines).
Duplicate one of the lines and move it down slightly to form the classic menu icon.
Convert this into a component and create a second variant for the close icon.
Now, we have a static navbar! Next, we’ll add more elements we’ll need on the mobile variant.
Creating a menu icon component
On mobile, we need a menu button that toggles the navigation links. Here’s how to create it:
Draw a small frame and remove its background color.
Inside that frame, add two thin horizontal rectangles (these will be the hamburger menu lines).
Duplicate one of the lines and move it down slightly to form the classic menu icon.
Convert this into a component and create a second variant for the close icon.
Menu icons as lines.
Menu icons as lines.
Menu icons as lines.
In the closed variant, move and rotate the lines to form an “X.”
In the closed variant, move and rotate the lines to form an “X.”
In the closed variant, move and rotate the lines to form an “X.”
X icon for closed variant.
X icon for closed variant.
X icon for closed variant.
Now, we have a menu button that we can use to toggle the navigation!
Grouping the elements
Before adding interactions, let's properly structure the navbar:
Group the navigation links into a stack and name it
Links.Wrap the button and the
Linksstack into another stack calledLinks + Button.Place the logo and menu button inside another stack called
Logo + Menu.Finally, wrap everything into a main stack called
Content, setting it toSpace Betweento make sure both items within sit on either side of the stack.Limit the maximum width of the
Contentstack to1000pxand addpaddingto ensure spacing on larger screens.
Now, our navbar is well-organized and ready for interactivity.
Turning the nav into a component
Since we want the navbar to be reusable, we’ll convert it into a component with desktop, mobile open, and mobile closed variants. Here’s how:
Select the navbar frame, right-click, and click Create Component.
By default, the first variant will be created—rename this to “Desktop” since this will be our primary layout for larger screens.
Click the “Add Variant” button to create a second variant and rename it to “Mobile Open”.
Resize the width to 390px to match a mobile viewport.
Now, we have a menu button that we can use to toggle the navigation!
Grouping the elements
Before adding interactions, let's properly structure the navbar:
Group the navigation links into a stack and name it
Links.Wrap the button and the
Linksstack into another stack calledLinks + Button.Place the logo and menu button inside another stack called
Logo + Menu.Finally, wrap everything into a main stack called
Content, setting it toSpace Betweento make sure both items within sit on either side of the stack.Limit the maximum width of the
Contentstack to1000pxand addpaddingto ensure spacing on larger screens.
Now, our navbar is well-organized and ready for interactivity.
Turning the nav into a component
Since we want the navbar to be reusable, we’ll convert it into a component with desktop, mobile open, and mobile closed variants. Here’s how:
Select the navbar frame, right-click, and click Create Component.
By default, the first variant will be created—rename this to “Desktop” since this will be our primary layout for larger screens.
Click the “Add Variant” button to create a second variant and rename it to “Mobile Open”.
Resize the width to 390px to match a mobile viewport.
Now, we have a menu button that we can use to toggle the navigation!
Grouping the elements
Before adding interactions, let's properly structure the navbar:
Group the navigation links into a stack and name it
Links.Wrap the button and the
Linksstack into another stack calledLinks + Button.Place the logo and menu button inside another stack called
Logo + Menu.Finally, wrap everything into a main stack called
Content, setting it toSpace Betweento make sure both items within sit on either side of the stack.Limit the maximum width of the
Contentstack to1000pxand addpaddingto ensure spacing on larger screens.
Now, our navbar is well-organized and ready for interactivity.
Turning the nav into a component
Since we want the navbar to be reusable, we’ll convert it into a component with desktop, mobile open, and mobile closed variants. Here’s how:
Select the navbar frame, right-click, and click Create Component.
By default, the first variant will be created—rename this to “Desktop” since this will be our primary layout for larger screens.
Click the “Add Variant” button to create a second variant and rename it to “Mobile Open”.
Resize the width to 390px to match a mobile viewport.
Setting wudth to 390px for mobile viewport.
Setting wudth to 390px for mobile viewport.
Setting wudth to 390px for mobile viewport.
Adjust the Content stack’s direction to Vertical so elements stack on top of each other.
Set Distribute to Start to align elements to the top.
Ensure the Logo + Menu stack is set to Fill Width so it stretches across the top.
Adjust the Menu Button to be visible in this variant.
Set the Links + Button stack to Vertical so the links stack properly.
Add padding: 20px on the sides and also 20px on the bottom for spacing.
Duplicate the Mobile Open variant and rename it to “Mobile Closed”.
Select the Links + Button stack and set opacity to 0 so it disappears when the menu is closed.
Reduce the height of the navbar to 60px to match a compact header style.
Ensure the Menu Button switches to the Closed state in this variant.
Adding interactions to the nav
Now, let’s make the menu functional:
Select the menu button component.
Add an interaction that switches the navbar between the open and closed states when clicked.
Ensure that the menu slides in smoothly and overlays the page content (by placing it with z-index set to 10 on the page).
Test the interaction in preview mode to ensure the toggle works correctly.
Adjust the Content stack’s direction to Vertical so elements stack on top of each other.
Set Distribute to Start to align elements to the top.
Ensure the Logo + Menu stack is set to Fill Width so it stretches across the top.
Adjust the Menu Button to be visible in this variant.
Set the Links + Button stack to Vertical so the links stack properly.
Add padding: 20px on the sides and also 20px on the bottom for spacing.
Duplicate the Mobile Open variant and rename it to “Mobile Closed”.
Select the Links + Button stack and set opacity to 0 so it disappears when the menu is closed.
Reduce the height of the navbar to 60px to match a compact header style.
Ensure the Menu Button switches to the Closed state in this variant.
Adding interactions to the nav
Now, let’s make the menu functional:
Select the menu button component.
Add an interaction that switches the navbar between the open and closed states when clicked.
Ensure that the menu slides in smoothly and overlays the page content (by placing it with z-index set to 10 on the page).
Test the interaction in preview mode to ensure the toggle works correctly.
Adjust the Content stack’s direction to Vertical so elements stack on top of each other.
Set Distribute to Start to align elements to the top.
Ensure the Logo + Menu stack is set to Fill Width so it stretches across the top.
Adjust the Menu Button to be visible in this variant.
Set the Links + Button stack to Vertical so the links stack properly.
Add padding: 20px on the sides and also 20px on the bottom for spacing.
Duplicate the Mobile Open variant and rename it to “Mobile Closed”.
Select the Links + Button stack and set opacity to 0 so it disappears when the menu is closed.
Reduce the height of the navbar to 60px to match a compact header style.
Ensure the Menu Button switches to the Closed state in this variant.
Adding interactions to the nav
Now, let’s make the menu functional:
Select the menu button component.
Add an interaction that switches the navbar between the open and closed states when clicked.
Ensure that the menu slides in smoothly and overlays the page content (by placing it with z-index set to 10 on the page).
Test the interaction in preview mode to ensure the toggle works correctly.
Responsive navbar complete.
Responsive navbar complete.
Responsive navbar complete.
Now, our navbar is fully responsive and interactive!
Final product
With everything in place, our navbar:
Stays fixed at the top
Adapts to different screen sizes
Includes a mobile-friendly menu toggle
Is reusable as a Framer component
Here’s my completed navbar, yours should look something similar.
Feel free to check it out and explore the demo.
Wrapping up
That’s it! Now you have a fully responsive navigation bar in Framer—no coding required. Getting the right structure is crucial because it makes our lives easier when making the navigation responsive.
If you wanna dig deeper, you can watch my full video tutorial where I explain creating this step-by-step in video format.
Now, our navbar is fully responsive and interactive!
Final product
With everything in place, our navbar:
Stays fixed at the top
Adapts to different screen sizes
Includes a mobile-friendly menu toggle
Is reusable as a Framer component
Here’s my completed navbar, yours should look something similar.
Feel free to check it out and explore the demo.
Wrapping up
That’s it! Now you have a fully responsive navigation bar in Framer—no coding required. Getting the right structure is crucial because it makes our lives easier when making the navigation responsive.
If you wanna dig deeper, you can watch my full video tutorial where I explain creating this step-by-step in video format.
Now, our navbar is fully responsive and interactive!
Final product
With everything in place, our navbar:
Stays fixed at the top
Adapts to different screen sizes
Includes a mobile-friendly menu toggle
Is reusable as a Framer component
Here’s my completed navbar, yours should look something similar.
Feel free to check it out and explore the demo.
Wrapping up
That’s it! Now you have a fully responsive navigation bar in Framer—no coding required. Getting the right structure is crucial because it makes our lives easier when making the navigation responsive.
If you wanna dig deeper, you can watch my full video tutorial where I explain creating this step-by-step in video format.
