If you're building a one page app in Bubble, you'll want to keep watching because I'm going to show you how to add in icons to your sidebar navigation.

Now, this is there's a number of caveats here. Are you building a one page app? Yes. Are you using custom states to change between the different views just like I am here. And are you using option sets in order to get the sidebar list, so dashboards, borders and settings?

Let me show you how that looks in the back end. So I've got an option set called View, and I've got dashboard, orders, and settings. And then on design, here's my sidebar. I have a repeating group showing all of my view option sets. And I've simply got a workflow action that changes a custom state for the view that's clicked. And then last bit of the recap, if I go on to dashboard, I'm saying only show the dashboard when my custom state's view value is dashboard.

Exploring Font Awesome

So how do I add in icons to my option set? Well, there's a neat trick you can do. So the icon library that is baked into Bubble is called Font Awesome. And for some unknown reason, they've not bothered to update that library. And so the Font Awesome version that Bubble uses is Font Awesome 4. And as you can see here from the Font Awesome website, it's telling you to upgrade to 5. Now, actually, Font

Awesome has progressed quite a bit, but we have to use version 4. So let me show you how we can quickly and easily add in an icon to the sidebar. So I'm going to go to my option sets and I'm going to create a new field. So at the moment, display, that's basically my label that prints dashboard, orders, settings. So if I add in the new one, I'm going to call this one FA for Font Awesome icon and make it text. I'm then going to go on to the Font Awesome website and search for an appropriate icon. So dashboard. Now, the search on the newer ones of Font Awesome is a little bit better, but let me take this one here. And so I'm going to select this part of the label and copy that. And then on dashboard, add it in to there. And then orders, so I'm going to go back, let's see if there's billing. No, card. Yeah, I'll go for credit card. Copy that. And add that into my orders and then settings. Hopefully, we can find a nice cog. Yeah, here we go. Just a cog. I can type that in.

Using [fa][/fa] to add icons to text in Bubble

How do I then display this in my Bubble app? So if I go to my text label here, at the moment, it's just printing the current sales views display. But I can add in [fa], and then I can dynamically insert in the icon and then close my square brackets, and I'm going to put in a couple of spaces. And let me show you what that does. It adds in the icon.

And this can be really helpful. It doesn't have to be to do with navigation. This can just be a way of adding in a font or some icon in line into your text. But it does work really well for a sidebar, navigation just like this.

Should I build a one-page or multi-page app

Now, I was working with a Bubble coaching client a few days ago, and we were discussing the merits of whether you should be building a one page app or a multi page app. And I think it comes down to the hierarchy of the app you're building.

I like to look for inspiration from the companies. You see think of... I mean, it's a bit murky now, but you think about Twitter or you think about Facebook, they divide what's on the page between whether the page loads to a new page or whether it's like a one page app. And I think that has to do with the hierarchy. And so I generally like to advise that unless you're trying to give the impression of a native piece of software, like you're trying to give the illusion to your users that they're not actually browsing a website, but they're using some desktop or mobile software, I like to split my app between multiple pages.

So in this instance, I would actually have these as different pages. I would have my URL changing at the top. And that makes the organization of my Bubble app a bit better. It means that the Bubble editor loads quicker for me when I'm editing a page. And it also means that if one of my users sends me a question about an app, I can send them directly to the location that is the resolution to their question. Now, if I was on orders, for example, to have a past orders, future orders, I could have another navigation bar along the top up here.

And that then might be a good use for custom states. But I'd say that your top tier showing different pages, I just think create actual different pages in Bubble rather than using custom states because I've worked with people and their element tree is just gigantic. And it slows down the development in the end because it takes a really long time to find what you're looking for.

Now it's personal preference and I'm just expressing mine, which is if yeah, split it out into multiple pages where you can. But there you have it. That's a long winded way of talking about sidebars, navigations in general, and the key point of this video, how to add in an icon to your sidebar.