Section 1 (Lesson 10/10): In this lesson, we focus on the design and functionality of the navigation bar (navbar) in Bubble. The navigation bar is a crucial component of web applications, facilitating users’ movement through the app and enhancing the overall user experience. It's a feature you interact with daily across various software platforms, making its design both interesting and essential to get right.

In this lesson, you'll learn:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

One of my favorite elements to design is the navigation bar, and you will be interacting

with navigation bars every day of the week in all of the software that you use. Now, there is a lot to a navigation bar. For instance, we have a logged-out view, with the login buttons or the signup buttons, and then we have the logged in view, which might include a little avatar icon that we can click to reveal a dropdown.

So we will continue to build this navigation bar through the duration of the course. But, in this particular lesson, we're going to do three things: we're going to create the navbar reusable element, then we're going to set up the structure of that navigation bar into three parts (or three columns), and then we're going to drop the elements inside those particular columns, such as the branding on the left, the links in the middle, and the buttons on the right. Let's dive in.

Here is a logged-out view, okay? The user is not signed in, so therefore they see the log in and sign up buttons. But this is at a desktop width. Of course, this design won't work very well on mobile, so if we change it instead to a mobile view (375 px), you can see that we now have an icon on the navigation bar where we can reveal the navigation in a more mobile-formatted design.

So let's go ahead and create a new reusable element. I'm going to call this element "Navbar." Next, we're going to bring up the Property Editor and the first thing we're going to do is set the container layout to "Column". Then, for the "Default border width" we're going to match the page width, which is 1400, and we're going to set both the "Min height" and "Max height" to 80. We're also going to set left and right padding to 32 and 32.

Over on the Appearance tab, what I'd like to do is just have a bottom border. Now, we don't currently have a border color, so let's set it up now by heading over to the Styles tab and clicking the "Style variables" tab. Now, we've currently used up all of these color styles, so Bubble has given us the opportunity to create more. We can create 32 colors in total, most of which will be tints and shades of existing colors. Though, there is a single border color for a uniform design that I'd like to create, okay?

So we're going to create a new color variable and we're going to name this "Borders." We're then going to write "Element & container borders" in the Description field and then create. Now we're going to set the color and the color is going to be #E5E5E5. Now that's set. So we can also delete this if we wanted, but you can create up to 32 different colors here.

Back on the Design tab, I'd like you to bring up the Property Editor for the Navbar one more time. Click on the Appearance tab. Now we're going to check "Define each border independently" so that we can define an independent design for each of the sides. We're just going to choose a bottom border style of "Solid" and then we're going to choose the new color we just created. And that just creates a little separation between our navbar and the rest of the content. And by the way, this navigation bar is actually going to float on top of the page, meaning that the content will scroll underneath. Let's do that now. Let's bring the Property Editor back up and find "Type of element" on the Appearance tab. We're going to set the type of element to a Floating Group. Now it sits above the page.

Do you remember earlier on when I said that we needed to contain the Footer content

with a max width of 1200? Well, we need to do the same with this Navbar, so I'm going to grab a Group and draw it inside the Navbar. I'm going to rename this to "Group Container", and will head over to the Layout tab and it's within this container that we're

going to drop further groups and they need to be distributed along the x-axis, so I'm going to choose a container layout of Row.

Now I'm going to uncheck "Make this element fixed-width" on this new Group Container, and I'm going to set a Max width of 1200, I'm going to set the Min width to zero, and I'm going to uncheck "Fit height to content." Now it fills the vertical space and we can remove the Min height as well (set it equal to zero). It is good practice that if you are not using a particular value - such as the 46 you just saw in the min height field - if that's not being applied, actually remove it altogether or set it to 0.

The "Group Container" currently has a horizontal alignment of left-aligned, so I'm going to horizontally align this in the center. What might be useful is under the "View" option across the top of the editor (next to "Arrange"), we do have have option to click "Show element borders". If I click that, I might also change the color to my actual border color and now I'm able to see the edges of these groups. So let's keep that going for now.

Okay, let's review the design one more time. So if I go back to a desktop view, you can see that we have brand on the left, links in the center, and buttons on the right. What we're going to do to achieve this design is drop three more groups and then flexbox distribute the width of these groups with perfect mathematics so it will decide how wide these groups need to be.

So we're going to grab some more groups now, and do make sure that your "Group Container" has a Container layout set to "Row". Left-align is fine for the container alignment. Now I'm going to grab another group and I'm going to draw it inside of Group Container. We're going to call this "Group Brand" and actually head over to the Appearance tab because I do want to add just a little bit of color here. Choose "Flat color" under "Background style", choose your primary blue and change the opacity here to 10% just to give us an easier indication of what we're working with.

Then, we're going to go back to the Layout tab and choose a container layout of Row because inside we're going to have the image and the word "Workplace". I'm going to uncheck "Make this element fixed-width" and let it span the full width. I'm going to remove the min width because I'm not using it, and I'm going to set the min height to 80 just so it is the same height.

Okay, now time for some magic. So we have Group Brand. We need two more groups, so I'm going to copy and paste with my keypad and it's going to drop it to the right (because of the row distribution on the parent Group Container). Rename this one "Group Links". I'm going to do that one more time and we will call this one "Group Buttons". Okay, now just highlight all three groups and we can just actually set the background style on the Appearance tab to "Flat color" and then set the color back to white. Let's also make sure that on the Navbar itself we also have a flat color and that it's currently white. I'm just going to choose my style here, since it's better to have it attached to a style.

Okay, now for "Group Brand." So if we go back to the Footer for a second, we've already done some work here, called "Group Brand". So why don't we do this: why don't we click "Edit" (next to "Saved") and click "Convert to a reusable element" because we're using the DRY method. We're learning to take responsibility as developers to not repeat ourselves. So convert to reusable element, call this "Brand", and create.

And to get back to where we were, click the dropdown to search for pages and reusable elements, and here we have Brand, Navbar, and Footer. So now if we go to the Navbar,

the "Brand" reusable element is now available at the bottom here in the Reusable elements section on the left. So I click it once, head over to the first group, "Group Brand", and click it again so it is inside that Group. And now on the Layout I just need to center it vertically and I can also choose to "Fit width to content" if I'd like. As you can see, because it's a Reusable element, that the label has now gone from blue (a regular container) to purple.

Now, for links, let's put some links in the center. So I'm going to click on the Link element and I'm going to drop it into the center group. Let's call this "Browse jobs". Okay, now remember we set up a style, but only for buttons, so I'm going to detach this style under "Style Attribute" and I'm going to set up another style. That style is going to be 16 pixels, 500 (Medium), center aligned, and the black color. Then, on the Layout tab, we're going to set the vertical alignment to the center. I'm going to uncheck "Make this element fixed-width", remove the min width, but check "Fit width to content". That's what we want. And then remove the min height.

Now I can copy and paste this, and call this one "About us". Copy and paste one more time using the keyboard shortcut and say "Blog". Now I'm just choosing to have three links here, though you could have as many as you'd like as long as it works responsively.

Now I have to set up the distribution of the child elements. The child elements are these links. So I'm going to click on the parent "Group Links". Go to the Layout tab, choose center align in "Container alignment" please and apply some gap spacing of 20 on the column between these.

Now for the actual buttons. So the first one is "Log in" and the other one is "Sign up." So I'm going to click on "Button" and drop it in the last group. This looks like a primary button to me, so let's call this "Sign up" and then let's have a look at the layout of this button. Uncheck "Make this element fixed-width", remove the min width (set it to zero), and check "Fit width to content". Fantastic. And let's set the "Min height" equal to 44 pixels. Now, you'll probably remember how to vertically align this. Here is a little cheat sheet here. Click the second option next to "Vertical alignment" to center it please.

Now I want this on the right-hand side, but we don't see a way to put it to the right-hand side here, so that probably means that the parent needs to control the distribution and the layouts. I'm going to click on the parent, which is "Group Buttons", and I'm going

to choose "Container alignment" to the right-hand side (option 3). Fantastic.

So that is our "Sign up" button, but what about our log in button? Let's copy and paste the Sign up button. Command C, command V, and come across back to the left-hand side, and then let's look at our styles. We have an "Outline button" style, so let's have a look at that. That's a default by Bubble and it's close to what I'm after, so I'm going to detach the style and I'm going to create my secondary button now.

The font color is going to be the black color and it's going to be 16 pixels (needs to be consistent with the other styling). I'm going to choose 500 (Medium), and keep the background style as "Flat color". On the borders it's going to be 8 for the roundness and the color is going to be our borders color. Lastly, the shadow style should be "None" on this guy, and on the conditional statement, I'm just going to have a look and I'm going to remove this hover condition because I'm going to come back to this soon.

Now that we've finished styling this button, let's call it "Log in" and let's just give it the style name by clicking "Create a new style" in the "Style Attribute" dropdown and naming it "Secondary Button".

Now you can see that the default naming convention we've created with Bubble is slightly different, and that's because there is no right or wrong way to create these particular design systems or naming conventions for styles. But I just want to show you how to adapt what we've given you to create your own system.

We need a bit of column gap between these two buttons, so let's do that! On the Layout tab, let's add, let's do about 12 on this. Yeah, that looks really good.

Okay, so the next stage is we have to deal with the responsive design. Okay, so head across to the Responsive tab and let's click 1200. Looking good. 992. Looking good. Starting to get a little bit squishy. If I had another link in there, it would start to be slightly problematic. Let's go to 768. Okay, so that's a problem. So now we have to choose a breakpoint: 992. So that's the process, you just put the design into the Responsive tab to see what the designs look like at these particular breakpoints. Yes, you can also pull out these handles if you want to be even more precise, but I prefer just to use a particular system before the design becomes unfavorable.

So at 992 I'm going to do this: highlight "Group Links". We're in the Responsive tab, we've clicked on 992, and we've clicked on "Group Links". We're going to set a condition here. So click on the Conditional tab. This is going to be a familiar one. We're going to say "When Current page width < Tablet (992 px)". Okay, the expression has resolved to blue. Looking good so far.

Now click the dropdown, and this is a simple one: "This element is visible." So let's select that, and we can see a checkbox. Well, why don't we say below 992 because that's where the design becomes problematic, let's actually hide it by unchecking the box. As simple as that.

There's one more thing we need to do. So if I pull this handle down, you can see that it's now hidden but the space still remains. This center space still remains, so we have to instruct Bubble to collapse the space. It's called collapsing, and a collapse can be a vertical collapse or it can be a horizontal collapse, but basically it removes the space. So on the Layout tab we're going to choose "Collapse when hidden", almost down towards the center. So watch what happens when I check this box, that is now closed down and almost doesn't exist but it'll come back at my breakpoint.

I'm now going to right-click and I'm going to make sure that "Group Links" is highlighted in the Property Editor. Right click, save some time, "Copy special", "Copy conditional expressions". Then we're going to click on "Group Buttons", right-click, "Paste special", and "Paste conditional expressions". Now look what happens. Okay, and the last thing we need to do in this Group is just check the box in the Layout tab to say "Collapse when hidden".

Now we're almost there. As you can see it's slightly more involved. What about the little icon to engage or to show at mobile widths? Let's do that and then we'll take a break!

So let's go back to the UI Builder for this. Let's go back to the UI Builder and what we're going to do is install a new plugin. So go over to the "Install More" button under "Visual Elements" and then just type the word "material" - we're looking for "Google Material Icons." So we want this one created by Bubble. We can see almost a million app installs. Let's install that. And done.

Now it's going to show up in the Visual Elements towards the bottom. Here we have "Material Icon". So I'm going to click once and I'm going to click again on the reusable element. In the Layout tab we're going to choose 24 by 24 for width and height. Okay, it's quite small but bear with me. For "Vertical alignment", choose the center. Now head over to the Appearance tab and change the color to our black, remove the roundness - roundness 0, we don't want roundness on these icons.

Now let's click on the "Choose an icon" option. Let's type menu and let's look for the three bars. Fantastic. Okay, now I'd like you to right-click on the material icon and then choose "Group elements in" and "Align-to-Parent container". Because what we're going to do now is I don't really like the look of big icons - icons look better when they are small - but the touch area for the thumb is now too small. We need at least 44 pixels touch area for mobile, so that's what we're going to do.

We're going to add it to an Align-to-Parent container, click that and we're going to call this "Group Menu". Then on the Layout tab, we're going to check "Make this element fixed-width", set it to 44. Then we're going to check "Make this element fixed-height", set it to 44. And if your icon isn't in the center of that parent group, just click on the icon and you have the ability to control the positioning.

But we do need to push these apart. So if we go back to the Responsive tab, we're almost done, guys, back to the Responsive tab, you can see that it's in the wrong position. It should be on the far right-hand side, it should be over here. So, click on your 768 breakpoint so the other ones are hidden. Bring up the Property Editor, and we're going to change the alignment here folks. We're going to choose the container alignment "Space between", and that pushes it to the right-hand side. Let's go back to 992 when you've done that.

Last thing we need to do is at desktop widths, this needs to be hidden. So we're going to do this slightly differently. On the Layout tab, I'm going to uncheck "This element is visible on page load" and check "Collapse when hidden". Now we need to bring it back below 992, so on the Conditional tab: "When Current page width < Tablet (992 px)", check "This element is visible." Yes, we want to bring it back. Okay, so 768, there it is. 992, it's gone.

Last thing we need to do is head across to the index page, scroll down to the bottom,

find your Navbar element, click once and click again on the page, and there we have it. Now I've got one issue to resolve. Let's click that. This might be a bit of a bug. We're going to leave it for now. What I want to do is actually preview the page. Actually, before we preview the page, double click on your "Group Section" over here where my mouse is on the image. Go to the Layout tab and I do want to move this down by 80 pixels, so I'm going to choose 80 pixel of top margin. It might be a small bug. I'm just going to actually delete this navbar again and I'm going to select it again and in the top left-hand corner, I'm going to drop it.

Okay, so it looks like the Navbar became embedded into the "Group Section", so I moved the group section down by 80 pixels, and then when it dropped in the reusable floating group, I made sure it dropped it in the top left-hand corner. So let's preview what it looks like. Refresh the page. Fantastic. So you can see it's in a sticky position

at the top and the content scrolls beneath.

If you can see the content, it means that you haven't set your Navbar background color to a solid primary contrast white color. And let's lastly just inspect this page, bring it down to a mobile width, here's a mobile icon and it's looking pretty good. Small issue to fix on the footer, which we'll establish at a later lesson.

Okay folks, so that concludes Section 1! I hope you enjoyed it. I know there were some difficult parts, but it's through the process of repetition and contextual building that it will become clear and far, far easier in the future lessons. I'll see you in the next section!