We're going to look at reusable elements in this lesson.

What are reusable elements? Well, they are basically components that combine elements such as text, buttons, inputs with functionality such as fetching data or running workflows. Let's take a look!

So earlier I created a waitlist page and I love the design of this waitlist page, but it's clear that I need a little bit more. Why don't we add the header from our landing page to this waitlist page? So I have two options here. What I could do is go to index, command C on my Mac, go back to waitlist, and paste it in. Let's move that to the top. Okay, so that is option one and, like I said, that doesn't really allow me to scale my app well because now I have orphaned nav bars across my app and I start making small changes to them, which turns into a big task as I need to then make those changes in multiple locations.

Instead, I have a better way. Let's delete this. Let's go back to the index page, click on the Navigation bar, and let's turn this into a reusable element. Okay, so I'm going to right-click and I'm going to say convert to a reusable element. Bubble now is asking for a name. Let me call this navbar and then create.

Okay, so it looks like we've come to a new page but in actuality, this is the reusable element section where we can change the design much like we did from our index page previously. We can add workflows here, we can import dynamic data, we can do whatever we like so it almost feels like its own page, but what's powerful about reusable elements is that we can just drag and drop them onto other pages.

Later on, when we want to make a design change or a logic change or a data change, we come back to to this reusable navigation bar and make the change in the single location, much like the styles tab for basic elements.

So I can see that now, I have web reusable elements here as my navbar, so how do we apply this? So if I now I go to my waitlist page, where I wanted a navigation bar, I scroll down the left-hand side to the bottom. I have reusable elements, I can click once and then drop it wherever I like. And there we go! There is our navbar on our waitlist page and I follow the same method for any page that I like. If I want to then edit this navigation bar, I can click edit element. It takes me to the reusable element section where I can make changes in this single location.