Hello in this video for bootstrap four, we're going to show you how to integrate drop downs inside of your nav. If you know how to do drop downs, you'll feel right at home. If you don't, don't worry, there's a video in this series that covers that as well. So we've got our drop down in our nav right here. So let's just use the first one. And what we're gonna do is create a new list item, you can obviously just replace an existing one if you want to.

And this is gonna have a class of nav dash item just as the other items do. But it's also going to have a class or drop down. And inside here, we're going to put up a href equals for this was going to put a hash because we don't want it to go anywhere, but you can either chain day if you want to, but if it's dropped down date you would want to we're going to put a class classes I should say, the multiple NAB dash link, drop down toggle data toggle. And for this drop down and this need to pour a role equal turn all of this, like I said, we've covered in a separate video. So if you want more information, go check that out in this series, area dash x banded equals false. And durscher actually removed this curve, it's gonna call this drop down.

And now what we actually need to do is create the drop down menu, aka what actually pops up because at the moment, we just got the button. Actually, I'm going to save it. refresh the browser so you can see what So we've got this, when we click on it, it's basically highlighting it, but it's not actually showing a drop down simply because we haven't coded one in yet. Do that. It's all symbols. You need a div with a class on drop down menu.

Inside here you need to have your own term. So for this I'm important a class equals drop down dash item, a href. And for this, I'm just gonna put our company website and inside here, I'm just gonna put put one and I'm gonna just copy and paste this a few times. So changed To button free. And also what I'm going to do is create knockin, there'll be no, what I'm going to put a divider in here. So to do that I just put an empty div with a class of drop down.

Goyder obviously don't have to have these items, you can have any sort of drop down item. This is just a particular items I'm choosing. And now that looks like we're ready to go. So if we just save this, go to our web browser refresh, click Done. As you can see, we have a drop down, and if you click it, it takes us to the designated website. Well, we have a drop down that works with in our navigational menu.

You might be thinking, can you add it within the pill and we need to really match the style of the navigational pill and Yes, you will. So to do that simple at the same time, code and I'm actually gonna add it in the middle of the item, so tool in the middle, so it looks a lot different. But there we go, go drop down, click it. And as you can see, it visually does look different because it matches the style of the navigational menu that it's in. So that's it for dropdowns. Within abs are the next task, we want you to actually put it within the stat nav, see how that looks.

If you have any questions, feel free to post them on sonar learning Dakota, UK for slash question dot php, there'll be a link in the description. Plus, there'll be another link in the description to the source code from this video and the source code from every other video in this series. So you can check out the code for the drop down via that link. Please rate, comment and subscribe as it really does help. And as usual, thank you for watching, and I hope you have a great day.