Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

Creating a sidebar with mobile menu in Bubble.io

This Bubble.io tutorial demonstrates how to layout a dashboard app that has a left sidebar with a mobile menu in Bubble. This video explores how to show and hide elements as the page width changes.

You're building a dashboard application in Bubble, you might be thinking along the lines of a design like this which uses a left hand sidebar and the top bar. This is an example from the great components library at tailwind UI. And I'm going to show you how to build this just structurally not perfect in Bubble as a way of just demonstrating how to use the responsive engine to achieve a layout like this.

Starting with a new page

So I have here a page. I'm in the new responsive engine. My app is old enough to remember the old responsive engine. I'm just going to make it a little bit bigger and then say, lay out as a row. So let's put in that left hand sidebar. So I'm going to drag in the group, and this is going to be fixed width, and it's going to have a container layout of column because items are going to be going downwards in it. And I'm going to say fix width, let's just make that a nice round value, 250. And I'm going to give it a background color so that it stands out. Okay, let's preview that. Okay, so we can see that it's anchored to the left hand side of my page.

We then got a top bar here, so let's add that in. So I now need to create a group to contain everything that isn't the left hand navigation. Sidebar, that's the word that's looking for. And so I've dragged in the group, and then layout, I'm going to say column them, and I'm going to get rid of the min w ith, and it's going to then fill up all of the space. I'm not going to do Fit to Content. I want it to fill up any space that isn't taken up by the 250 here. Let's give that a background color so that it really clearly stands out.

And then we have a top bar here. And the top bar in this case is going to be inside of... Let's name this body, and let's name this left, it's going to be inside of the body. You could go for a design where the top bar goes all the way across. Hopefully, this video reveals enough for you to work that one out. So if I go group, and I put that group and I put that group in here and we're going to call this top bar. I'm going to make it white so it stands out. Layout is going to be a row and get rid of the fix width and then it takes up the whole width across. Padding, let's just give an example of some good padding. So top and bottom, eight sides, eight 20. That then would allow me to add in an icon up here. And if I then lay out to split them, I get an icon over on that side. Let's preview that.

Okay, and let's just inspect and see how responsive it is. So you can see it always fills the full width of my page. And then if I shrink down. That last bit is a bit funny because of this text which appears at the bottom and I've got the debugger mode on true. But you can see there comes a point where it needs to go from... Let's make that a bit bigger. When it needs to go from a desktop mode to a mobile or a tablet mode. So let's work on that.

And to do that, I'm going to very quickly add in... I will make it neat. Let's say 40. Okay, and then I'm going to put this into a group, and you'll see why in the moment. Group column. And I'm going to call this menu items. And then I'm going to copy my button. This is as if, I mean, just like here, it's top level navigation links in the app. Let's apply gap spacing between elements here. Okay. And then I'll just say that these are all... I should have done this for copying and pasting it. These are all 100 %. Let's just paste those back in again.

Okay, right. So when the page gets to a certain width, I basically want this left side bar to disappear. And then I want this is going to be my hamburger because I want to be able to access this same list here. And the way I'm going to do that is by using a reusable element. So I'm going to convert this to reusable element and say menu links. Well, buttons is a better description. Okay. And then if I go back to my... let me call it sidebar. Yeah. So by creating a reusable element, it hasn't made this a reusable element. It's created it a new down here under Reuseable Elements. So I have to delete this example, and then I can search for it, menu buttons, and add it back in.

Okay. So when the page gets to a certain width, I would like this to disappear. And so I can play with it and we'll say... Why don't we say there, 768px. And so I can add on a condition statement of current page width is equal to or less than 768px. And then I can say this element is visible and untick it. I also need to check this box here because that removes it from taking up space on the page. And we can see that in action there. It goes away and it comes back.

I need to do the opposite. In fact, I'll do it like this. So I don't want that to load on the page. I want it to collapse when empty. But when page width, and it's the same expression, is equal to or less than 768px, I want it to be visible again. What have I missed out here? Maybe that's going to work. Oh, there we go. So my hamburger has come back into view.

Now, how do I put this item and attach it to my hamburger? So I can use a group focus. And the group focus has to be attached to an item. And so the group focus is going to be attached to my icon bars. Now, this might be a little bit buggy. I was running through this with a coaching and client a few days ago because the bars is hidden at this point. But I know that it's attached because I've made it attached there. And it just frustratingly shows it up here. But the layout in here is going to be column. And then this is where I drag in my menu bar buttons so that they're shown again. Then we'll very quickly find out whether this is indeed the bug in the editor or it's going to affect how things... But there we go.

So when I make my hamburger visible in the editor, it shows my group focus. And I want to edit the group focus. And I put a minus figure in here. Bought too far. So that it's not going off the edge of the page. Taking its time. There we go. And then I could put a value in here. And I'd also want to give this a background. I'll give it a background of white. No, to make it stand out, I'll do it like that. So that it's standing out and so it's nice and clear. I then want to add a toggle to this. So when the bar icon, my hamburger is clicked, I want to toggle the group focus. Let's test that.

So my page is shrinking, it's shrinking, it's approaching and it disappears. And it's hidden, it's there. I think it's there. It's hidden. It's hidden behind the responsive bar here. Let me just add some padding into that so it's really clear. Padding right. Let's just put up to 100. Okay, now let's try. As it's being hidden, not on the page, but by the UI of the Chrome Responsive tool in the Inspector. So you see there, no hamburger. When the sidebar disappears, the hamburger comes in. When I click the hamburger, I get my same list of links. The reason for using a reusable element is that I then need to create that element. But that's not a real case scenario where the page changes size as you go.

Point is, I've used the reusable elements so that my menu items, I need to create them once, and they're present on my left hand sidebar when I'm in desktop mode. But when I go into a smaller screen, I can access exactly the same list, exactly the same links using a hamburger mobile menu.

 

Latest videos

lockcrossmenu