7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 18Length: 1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Dropdowns

Hey, welcome back. In this lesson, I'll move on to the more advanced components and I'll show you the dropdowns. So using dropdowns is very easy, you gotta start with the div class, dropdown. And inside, you have two components, the first one is the button or the link which will trigger the dropdown. And a second one is the dropdown itself in the menu. So let's start with the button. So I'm gonna say, I'm gonna add a button here with a class of btn with an additional class of dropdown toggle. The type is gonna be button. I'm going to give it an id of ddmenu or dropdown menu. And then, very important, this is what will make the dropdown work. Data toggle is going to be dropdown, okay? And inside i'm just going to say, dropdown. Okay, so let's see it. And there it is. We can also add a small arrow. So span or a class of caret. This will add an arrow down. Now for the menu, we'll start with an unordered list with a class of dropdown menu for role we're gonna say, menu, again to help with accessibility. And then we're gonna have a list item with a role of, presentation. Again this is optional, but if you can use it. And inside the list item, we're gonna have an anchor tag, href is gonna be nothing. Roll is gonna be menu item. And we're gonna set a tab index of -1, and that will prevent this link from being accessed by tabbing. And I'm gonna say list item, list item 1. Or list item, okay? Now I'm just gonna copy this a bunch of times. And I'm gonna refresh and click on the button and there it is. That's the dropdown. Click outside to close it. You can add dividers, to various elements. So for example, I can add a list item here. Actually, I'm just gonna copy and paste it. And I'm gonna add a class of divider to it. And, of course, it doesn't have any content. [BLANK_AUDIO] And there it is. You can also disable a specific element by adding the class of, disabled, to a list item. So this is the first one. Refresh. And now the first item is disabled. We can also add cool headers col headers to our list items. So if you wanna separate this dropdown. You can add the following. So list item with a roll of presentation, I'm gonna add the class of dropdown header, and for the content I'm just gonna say, a header. And I'm gonna add the same right here. I'm gonna say, another header. So there it is, a header and another header. Now, if you want you can alter the appearance of this button. So, by adding a btn class, so btn default will generate this. Yeah, a btn primary, will generate this and so on and so forth. You can also use this type of dropdown inside nav bars inside tabs, pills and so on. And that's basically it about dropdown menus. Next up, since I mentioned tabs and pills, I'll show you how to use these two components. [BLANK_AUDIO]

Back to the top