How to nest components inside other components

Content warning: This lesson is all about advanced components in Webflow. If you haven't seen our first video on components in Webflow, start there. This is super powerful. We can make a component out of anything we want, then we can reuse it throughout our site. But what if we took this all a step further and we put a component inside another component? More importantly, why would we do that? In this lesson, we'll create a component. We'll nest it inside another one. We'll edit that nested component. We'll cover properties on nested components, and we'll even show how to control content on a nested component from the parent component. A section title that Stacy ensures will get simplified by the time we go to post production. First part, let's make this button. It's just a link block with stuff inside. We'll just right click on it and create a component.

And let's give our component the name of button, hit Return. Component. Let's move on to nesting components in other components. So we have this component here, and now that this button is a component, let's add another one. But this time to the navigation component, double-click to edit. Now we're editing the nav component. Go over to components. And there it is. Let's drag this new button component into the navbar. So how do we nest a component in another component? Exactly like that. And now that we have so much extra time left in this section, let's show a different example. Let's escape out and let's go to another area where we want to use a button. Here's a card or two cards rather. This is a card component being used two times. So if you go into components, you can see we have card two instances.

That's these two. Let's add our button to either of them. Double-click. Let's go to components. And we'll drag in our button component. And when we do, notice how it's in all instances, it's in both component instances, but here's where things get interesting. Part 3, editing a nested component. Three examples here. Both important except imagine there's a word like both for groups of three, maybe troth. But first, if you go in, by the way, let's Escape out so we're all on the same page.

But if you go in, if you double-click to edit, really any component that has the button inside, we can now double-click again this time on the nested component. And now that we're editing the nested component, we can change stuff. Change something like the text to not say button. Not only does it change here, and not only does it change in the other card, but it's changed. Let's Escape out. It changed in the section and in the navbar. And that's the key. When you're editing a component that's in another component, it's no different than when it's not nested. Let's prove that example 2, our first button component. And as we know, this is just in a normal section, it's not in another component. We can double-click it. We can make a change because yes, sign up is supposed to be two words, not one word when it's written as a verb.

But let's go back to why we're doing this. We made this a component, so anywhere we use it can have the updated content and structure. That's why we're using components and not just relying on classes for styling. So for our last example, let's swap out the image and we'll do that by selecting something that makes a bit more sense than the existing one. And once we do, we can see that it's replaced. That image is replaced in all instances, whether it's nested inside another component or it's just a component like the one that's in the section. That image is replaced in every instance of the button component. And that's our third and final change in this section. Again, what we're demonstrating isn't any different in terms of the behavior you would expect from editing any component. It just so happens that some of these components are nested inside other components too.

TLDR: a nested component so far at least is exactly like a standard component. It's just living inside another one. So if that's part 3, what is part 4 all about? Part 4 is about change, individuality, every button not being the same. And there's two examples we've seen on this page. Two examples of nested component. We've seen the navbar — we put the button component in the navbar component — and the card — we put the button component in the other thing. And of course the section doesn't count. That's literally just a component in a section. So what do we want to do? We want to show how we can change what this button says in every instance of the navigation component without affecting every other instance of the button. We don't want it to affect the section. We don't want it to affect the cards just when this button is nested inside of a navbar.

So how do we affect this button when it's inside of the navbar component? Well, we can do that by creating a property: a text property that lets us override that text. And here's where we can create that property: Here or here or here or here. It doesn't matter. Just get to the button component and we can edit it. It doesn't matter where. And once we're editing our button component, once we've double-clicked to edit our button component, let's click the thing we want to change.

Now, if we just change this text, let's try it. It's going to change that text everywhere. That's not what we want. We want to change the text in different places. So instead, let's undo. With the text selected let's go over to Element Settings and we can see the default text. But instead, let's press next to it in this little plus and we'll create and connect the property names, keep things organized. So let's just skip past this part because let's be honest, this lesson's getting a bit tedious. And instead we'll spend our energy demonstrating how now that we've added a property to the text, we can now perform magic. Let's Escape out of literally everything.

And if our goal is to change the button text, but only when the button's nested in the navbar component, let's show what happens when we do. And just to demo that this is real, let's copy and paste the navbar. Double-click to edit the navbar component and check this out. We can actually double-click now, right on the text inside the button. We're not actually editing the button component, just that text we created a property for. And just like that, the text itself is selected. Let's change it to something like download. And there it is. When we finish that change and when we escape out, it's updated in every navigation component, but it's preserved the default stuff everywhere else. And if we go down to the section because we added that property on the button text, we can override it here too. Double-click type something out. Again, it only affects this instance. When a component is nested inside something else it'll affect all of those instances, just like the navbar example. So just to prove that, let's do that on the cards as well. Double-click to edit the card component.

And if we change the text, we'll just double-click to override the text in this button. Notice how it changes the text only in buttons when nested inside of the cart. That's the hierarchical whatever properties let you override. They literally let you set properties on any instance of a component. And when that component is on its own, like in the section changing something like the text, it only affects that one button component, that one instance of the component. But when it's nested, when that component is nested inside another component, when we make a change to the button component, it'll affect that button every time it appears inside that parent component. This takes us to our final, our last and final part, and that's multidimensional components.

Now, multidimensional components build on everything we've covered so far with nesting, but they essentially create what scientists call a wormhole between a component property on a nested componen, let's call that a nested component property, and its parent component, let's call that its parent component. And here's exactly how it works. Let's double-click to edit the parent component, we'll edit the card component, then let's select the button component. Remember, we already created a property here, and with the component selected, we can go to Element Settings, and this time we're going to click the plus.

But this time when we create and connect a property, it's going to connect this property to the parent component to the card. Now, why is that important? Well, if we Escape out, because let's be honest, it's taking a lot to hang in there. And if you've made it this far, congratulations. You deserve a medal. What kind of medal? A medal that says "you successfully linked a component property of a child component to its parent component." But here's what we unlocked by doing that. On any instance of this parent component, we can just double-click on the text and change it to something else. And notice how now it only affects this instance of the card.

Now this is a lot. With great power comes great responsibility. Is that relevant to this lesson? No, but here's what is. We created a button component that doesn't just keep styling consistent, but because it's a component, it keeps content and structure consistent. We could swap out images, change the order... That's the beauty of components: content and structure are kept consistent. Of course, after that, we showed that we can nest components inside other components, that we could edit nested components, which by default it's just like editing any other component. We showed how we can create properties that let us change things on components, which when nested inside other components will stay consistent in each instance of that parent component. And when we do that, we can also go in and link back that property from the child component to the parent component and make changes that only affect that instance. Now this stuff is advanced. That's why we had a disclaimer at the top.

But let's take a quick moment to celebrate two things. One: we made it to the end of the video, unless you skipped. We'll be looking at analytics. It's possible you're one of many, but two: we should also celebrate that we use the word "component" 97 times, but that's nesting components inside of other components. And that was number 99.