Back

How to Make a Responsive Navbar in Framer

Nabeel

Founder @ SegmentUI

Framer is generally super intuitive to use but one of the trickier things to implement correctly is responsive navigation. Most beginners spend quite some time trying to get this part right. Once you understand how to make your navigation responsive the right way, it becomes extremely simple to set up for every project that comes after. In this tutorial I will cover the basics of making a responsive top navigation bar in a few simple steps.

Step 1 - Create Some Basic Components

Before we get started, we need to make a couple of components that will reside inside the navbar. One is the logo which is optional and the other is the hamburger menu. After creating this, you can begin creating the actual navigation.

Step 2 - Create The Navbar Base

The base of the navbar is a fixed height, horizontally stacked container with 3 parts. The idea is simple. When its in desktop mode, it will be horizontally stacked and when its in mobile mode, it will be vertically stacked

Step 3 - Add Content Inside the Skeleton

This step is the most crucial step of this entire tutorial. The button container and the link container are straightforward. However the key to making it responsive lies in the first logo container. The logo container should contain both the logo and the hamburger menu. We will remove the hamburger menu later and will make sense it the next step as to why its there in the first place.

Step 4 - Create a Mobile Variants

  1. Now create mobile variants for both closed and open state

  2. Vertically stack the parent container with height set to fit

  3. All the children layers should have width set to fill and height set to fit

  4. For the logo container, ensure that the spacing has been set to "Space Between"

  5. Change the hamburger component to close in the open variant

  6. This step is optional but you can set min and max height to 100 view to ensure that it takes up the entire screen size on open

Step 5 - Add Transitions

Now add "on click" connections to the menu icons for both closed and open variants

Step 6 - Clean Up & Add to Page

After the transitions and interactivity is set up, you can remove the hamburger menu from the desktop variant. Finally, you can add the component to your page and set the width to a 100% and position as fixed. You can optionally set the mobile logo variant to just the icon to make it cleaner.

Additional Info

This tutorial just covers the basics of making this responsive. Feel free to experiment with different positions & alignment. If you want to remix the file, you can do so here.

If you're looking for video walkthrough, you can check out these videos by Nandi and Benjamin. For custom navigation components, check out our UI kit or component library

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

License

Can I use it to create client projects?

Can I use it to create Framer templates?

Pricing

Is there a free version?

Do you have a student discount?

Can I buy components seperately?

Will I get future updates if I purchase now?

Is this a one time payment or a subscription?

What is the difference between Pro and Pro Creator Access?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!

Loved by Designers, Developers and Founders

See what our 3500+ customers have to say

Unlock everything with a one time payment

For the fraction of your next project, you can boost your workflow by 10 folds

psst, you're eligible for a secret discount. Use SCHOLARSJOURNEY at checkout

Pro

$99

One Time Payment

Full Access to the Figma UI Kit

Full Access to the Framer UI Kit

Full Access to the Framer Code Components & CMS Upgrades

Full Access to 4 Premium Framer Templates

Full Access to Framer Code Genie GPT

Request Components & Layouts

Get Updates Forever

Light, Dark & Dynamic Modes

Use for Unlimited Projects

Commercial License Only

Use for personal and client projects

Pro Creator

$199

One Time Payment

Everything in Pro

Template & Commercial License

Use UI Kit to create unlimited client projects and templates

Frequently Asked

For anything not covered here, mail us at hello@segmentui.com

General

What is SegmentUI?

Is it for Figma or Framer?

How do I access after purchasing?

License

Can I use it to create client projects?

Can I use it to create Framer templates?

Pricing

Is there a free version?

Do you have a student discount?

Can I buy components seperately?

Will I get future updates if I purchase now?

Is this a one time payment or a subscription?

What is the difference between Pro and Pro Creator Access?

Supercharge Your Design Workflow

1000+ variations of styles, components, interactions, layouts, transforms, code overrides, code components for Framer & Figma. Power Up Now!