How to Build a Responsive Navigation Bar on Bubble

Navigation bars — ‌or nav bars, for short — ‌are everywhere. From marketing and landing pages to web and mobile apps, they’re a recognizable element that helps users move between pages, experiences, and information.

In this how-to, Buildcamp founder and Bubble educator Gregory John shares his go-to tips for reliably creating and testing responsive navigation bars on Bubble. In other words, he dives into how to make sure your nav bar looks great and works properly across different screen sizes, from large monitors to everyday smartphones. (If you need an intro or refresher on Bubble basics, check out this 10-minute build-along session with co-founder Josh Haas.)

Ready? Let’s get started.

Step-by-step instructions for how to build a responsive navigation bar on Bubble

It’s OK if you have to pause or slow down the video tutorial as Gregory walks through his process. To help, we’ve spelled out each instruction, step by step. 

1. Build a strong three-column foundation. (0:57)

Gregory starts his tutorial after he’s already designed the basic navigation bar, but takes a few minutes to review how he’s thoughtfully constructed the example. He’s designed his nav bar as a Floating Group and Reusable Element with a default builder width of 1,400px and both left and right padding set at 32px.

From the elements tree, Gregory demonstrates how he uses a Group Container to contain the elements within his nav bar with a max width of 1,200px. This helps create a good user experience. He shows the three columns he's set up within the Group Container configured as Container layout > Row.Importantly, Gregory explains that his mobile touch icon — sometimes known as a hamburger — is configured to only show beneath a breakpoint. He does this by hiding it on page load. Gregory then explains how the center-most group in his nav bar can be visually customized to create different layout alignments, followed by a quick review of his left-aligned column on the right.

2. Jump into the responsive editor (3:42)

Right above the elements tree, click from the UI builder to the responsive editor to see how your design responds to different page breaks. Gregory shows how we want to uncheck the This element is visible on page load option but keep the Collapse when hidden option selected.

Click the 1,200px, 992px, and 768px dimensions at the top to preview what your design looks like on different device dimensions. You’ll notice the design starts to feel crunched at 768px, so we want to configure the design to adapt to one pixel below 768px. 

3. Set up your menu responsiveness (4:50)

Write a conditional statement for your mobile touch group icon: When Current page width < Mobile Landscape 768. Click on Select a property to change when true and check This element is visible. 

Right-click to copy your conditional expression to your clipboard since you’ll be reusing this expression again.

4. Set up your center column responsiveness (5:38)

Select your center column’s property editor and copy your expression into its conditional tab. Click on Select a property to change when true and select This element is visible. Uncheck the selection since we want to hide this center column when we’re showing the mobile touch menu. From the Layout tab, make sure Collapse when hidden is checked.

Now, select your entire center group. Right-click Copy special > Copy conditional expressions.

5. Set up your right column responsiveness (6:33)

Right-click on your right column and Paste special > Paste conditional expressions. Like we did in the previous step, you’ll want to make sure Collapse when hidden is checked under the layout tab to free up space as the width changes. This will allow the left-most column to dynamically occupy the available space.

6. Test your responsive nav (7:01)

Use your mouse to pull the responsive editor handle in and out — you’ll see your responsive navigation bar adjust based on the changing widths. Nice work! Just one more thing…

7. Optimize your responsive nav for mobile (7:21)

At mobile widths, it’s good design practice to lessen the amount of padding to make better use of the available visual real estate. Click into your nav bar property editor, select the conditional tab, and write a new expression: When Current page width < Mobile Landscape 768. Click Select a property to change when true and configure Left padding to 16px and Right padding to 16px.

6. Give your responsive nav a spin (7:01)

Use your mouse to pull the responsive Editor handle in and out again to test your design. Woohoo! 🥳

Recap: Q&A with Gregory John

Incorporating responsive principles into your no-code design toolbox can take a little practice. In the Q&A that followed Gregory’s live session on How to Build Day, he shared some of his go-to tips for designing on Bubble. His answers have been edited here for clarity and length.

What are the common pitfalls you see when designing in Bubble’s responsive engine?

Gregory: “New Bubble Developers often just want to build a feature and make it work. And then because design is an afterthought, they sit in the responsive tab fighting with the responsive settings, and soon the user experience is degraded.

What we need to think about over time is a design system. What are the breakpoints that we're using throughout our app? What happens at those breakpoints? Maybe ‌‌padding reduces, maybe margins change, maybe distribution within columns and rows changes. 

Systems make design a lot more straightforward. You don't need to be a good designer when you've got good systems, because good systems ensure consistency.

I mentioned max width in the tutorial. One of the other common pitfalls I see is often developers forget or choose not to set a max width. For example, if you’re designing a dashboard, I wouldn't have a dashboard fill an entire screen because if I opened up a dashboard without a max width, I have to move my mouse all the way across. We want to reduce the amount of work someone needs to do when they're moving the mouse around.” 

What does it mean for an element to be visible on page load?

Gregory: “We only want to render on the screen what a person needs to see, when they need to see it.”

Would it be OK to build at 1,200px and then later work on scalability?

Gregory: “We need to make a distinction between the Bubble UI width and the width a user is viewing your application on.

I build with a Bubble UI width for the editor itself at 1,400px, and I'm on a slightly larger screen. You can build at 1,200px as well. It doesn't really matter whatever you decide, but just remember that your users will be viewing your designs on screens that range from 2,100px wide down to 320px wide. We have to think about that when we're building.”

Do you have any advice about building for mobile?

Gregory: “I use breakpoints. We talked about the 768px breakpoint — another good mobile breakpoint is 576px.

There’s work to be done to optimize for mobile widths. Like I mentioned, we want less padding so we can have more screen real estate. We want to reduce the size of our heading text, but not our body text, specifically because we have double density on phones. If we reduce the body text even further, it's going to be difficult to read. I'll make the buttons bigger, but I'll make the heading smaller. I'll also look at various text weights when it comes to reading on mobile.

Look at your designs on a mobile phone. When I build responsively, I’ll pick up my phone at the end of the day and do a quick scroll through and that helps inform what my next maneuver is.”

How would you recommend translating work in Figma to Bubble?

Gregory: “Figma is a tool I use every day — I use Figma and I use Bubble. I think it's a good process if you work on a team to‌ start with the designs because that can inform the look and feel. You'll be able to collect a lot of feedback before you start building your designs on Bubble. 

Because Figma also uses Auto Layout and has FlexBox capabilities (like Bubble), you can bring across basically the same settings. If you can build in Figma and you're good at design in Figma, you'll be exceptional on Bubble.”

What are the advantages of the Floating Group vs. the Group?

Gregory: “Floating groups sit above the page on the z axis, which means that if you think of a navigation bar, we can create sticky navigation bars. As a user scrolls down the page, the navigation bar remains in place. We just have to think of a floating group as floating above what’s on the page.”