Dashboard 1

The .dropdownclass indicates a dropdown menu. To open the dropdown menu,use a button or a link with a class of .dropdown-toggleand the data-toggle="dropdown"attribute. The .caretclass creates a caret arrow icon(),which indicates that the button is a dropdown. Add the .dropdown-menuclass to a <ul>element to actually build the dropdown menu.

The .dividerclass is used to separate links inside the dropdown menu with a thin horizontal border:

The .dropdown-headerclass is used to add headers inside the dropdown menu:

To disable an item in the dropdown menu,use the .disabledclass(gets a light-grey text color and a "no-parking-sign" icon on hover):

To right-align the dropdown,add the .dropdown-menu-rightclass to the element with .dropdown-menu:

If you want the dropdown menu to expand upwards instead of downwards,change the <div>element with class="dropdown" to "dropup":

To help improve accessibility for people using screen readers,you should include the following roleand aria-*attributes,when creating a dropdown menu:

If you want the dropdown menu to expand upwards instead of downwards,change the <div>element with class="dropdown" to "dropup":