In this video, Ray Villalobos shows how to create a dropdown nav component inside a navbar, since it’s pretty common in navigations to add dropdowns. He explains how the structure of dropdowns in navigation work.
- [Instructor] Although dropdowns are separate components, I'll show you to how to add them to menus in this video, since it's pretty common to add them to menu elements. So to get a dropdown going, what you do is create a dropdown container, to align everything to that element. So if you're using a list item to create the menus, you can add them to the li. If you're using just anchor tags, you're going to need to create a separate element with the class dropdown. The dropdown-toggle class is added on the link, in order to get a little triangle to indicate the dropdown.
So let's take a look at what it takes. It's a little bit complicated, and we started out with this right here, just a simple menu. We want to add a dropdown here to Services, and sort of add these different services that are right here to the dropdown menu. Let's go ahead, I'll make this a little bit shorter, I don't want to go to the small breakpoint, so I'll stop right there. We'll be able to see the dropdown menu here on the right as we build it. So I'm going to scroll back up, and I've got this navigation right here.
And, I'm going to separate this section because this is where I'm going to have my dropdown in this anchor tag. I'm using the straight link, the anchor tags instead of list items, it's a little bit faster, and all you have to remember is that you don't need a separate container. Because we're using anchor tags though, we do need a separate container. We'll create a div right here with a class of dropdown. And the reason you need this is to make sure that things align properly.
A dropdown should move with the elements. So, because when we click on the Services we want the dropdown to appear right here, we need to go ahead and create something that sort of merges the two in the proper position together. And that's what this div is doing. So in addition to the regular nav-item and nav-link class, I need to add a dropdown-toggle right here. And I'm going to just put this href in the next line so we can see things a little bit easier.
Another job of this dropdown toggle is to show the little triangle at the end of the dropdown, so that we can tell that this is actually an item that will have a dropdown underneath. So you could see it right here. It's not going to really do anything yet until we create the actual dropdown. So now we need to create the dropdown, we just do that as a separate element, within the div container, that has the class's dropdown. And we need a couple things here. First, we're going to create a container that's going to have all the links, so this will be just another link in this case, a class, and the class here is going to be dropdown-menu.
Then, in here, let's go ahead and close that one out. Inside of this dropdown menu, we're going to have a series of links as well, so this will have a class of dropdown items. And we'll put in an href, and we'll just put the pound sign here. And, then each of these would have the names that we wanted to use here, so we'll put in Grooming, General Health here.
So Grooming is the first one, and then each of these items are pretty much just going to be sort of the links that you want to use. So we've got Grooming, General Health, Nutrition. Then after that, we have Pest Control. Scroll back up to the top, and let's go ahead and save this. And you can see the links kind of appear. It's not going to be quite working right just yet, it needs a couple of other classes.
Actually, I'm going to change this anchor tag. The dropdown menu itself is not an anchor tag, so we need to actually make this a div. And let's go ahead and save that. And now that looks a little bit better. It's not really working quite yet, but now at least those links are hidden. To make that link activate, we actually need to add a data toggle attribute, and ask for it to toggle the dropdown that we're creating here, so let's go ahead and save that, and let's see if it's working now.
And it looks like it's working pretty good. This is technically all you need to make it work, but we should probably add some screen reader classes to make this more friendly to screen readers for the disabled. So we'll add an id to this dropdown. We're going to call this myDropdown. You should call it something related, so maybe servicesDropdown. And that needs to have an area labeled by attribute, just to make sure we do it correctly.
I'm going to copy and paste that. And then, in addition to that, we'll add some other screen reader classes. Aria-haspopup, this is going to be true, and then aria-expanded, this is going to be set originally to false. Okay so let's actually go ahead, reorganize this a little bit, put this href here, and this data-toggle, and some of these up here, and then the aria classes on the next line.
And I think that looks pretty good. And let's just make sure that this is still working just fine. That is looking fantastic. So it is a little bit complicated, especially when you have to add some of the aria classes, but those are well worth it, to make sure that the dropdowns work with as many people as possible. As I mentioned, although dropdowns are separate components, they're really great ways of creating more flexible navigation elements.
- Creating a basic template
- Reviewing basic styles and typography
- Using colors with Bootstrap
- Working with classes that help you deal with images
- Working with grid containers
- Offsetting columns
- Using list groups to style lists, buttons, and links
- Using breadcrumbs
- Reviewing layout components
- Using form styles
- Working with interactive components