BS Dropdowns
Basic Dropdown
A dropdown menu is a toggleable menu that allows the user to select one item from a predetermined list.
------list mukava -----
Example
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
Example Explained
The .dropdown class represents a dropdown menu.
To display the dropdown menu, use a button or link with the class of .dropdown-toggle and data-toggle=”dropdown” attributes.
The .caret class adds a caret arrow icon (), indicating that the button is a dropdown.
To create the dropdown menu, add the .dropdown-menu class to the <ul> element.
Dropdown Divider
The .divider class is used to separate links within the dropdown menu with a thin horizontal border.
Example
<li class="divider"></li>
Dropdown Header
------list mukava -----
The .dropdown-header class is used to add headers within the dropdown menu.
Example
<li class="dropdown-header">Dropdown header 1</li>
Disable and Active items
------list mukava -----
Use the .active class to highlight a certain dropdown item (a blue background color is added).
To deactivate an item in the dropdown menu, use the .disabled class (which has a light-grey text color and a “no-parking-sign” image when hovered):
Example
<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>
Dropdown Position
------list mukava -----
To right-align the dropdown, apply the .dropdown-menu-right class to the element with .dropdown-menu:
Example
<ul class="dropdown-menu dropdown-menu-right">
Dropup
------list mukava -----
To make the dropdown menu extend upwards instead of downwards, modify the <div> element with class=”dropdown” to “dropup“:
Example
<div class="dropup">
Dropdown Accessibility
To increase accessibility for persons using screen readers, you should include the following role and aria-* attributes when building a dropdown menu:
Example
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">About Us</a></li>
</ul>
</div>
