Drop down
Overview
Use the .bsk-dropdown
class to create a menu that appears when triggered by a
supported element.
Drop-down menus are ul
list elements, containing a set of links and other
components.
Interactive drop-downs require the drop-down JavaScript plugin, which is enabled on this site.
Supported elements
Button drop-down
<div class="bsk-dropdown">
<button class="bsk-btn bsk-btn-default bsk-dropdown-toggle" type="button" id="dropdown-menu-1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown <span class="bsk-caret"></span>
</button>
<ul class="bsk-dropdown-menu" aria-labelledby="dropdown-menu-1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</div>
Split-button drop-down
<div class="bsk-btn-group">
<button class="bsk-btn bsk-btn-default" type="button">Dropdown</button>
<button class="bsk-btn bsk-btn-default bsk-dropdown-toggle" type="button" id="dropdown-menu-1a" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="bsk-caret"></span>
<span class="bsk-sr-only">Toggle Dropdown</span>
</button>
<ul class="bsk-dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</div>
Navbar item drop-down
See the navbar documentation for using drop-downs in Navbar items.
Variants
Default drop-down
<div class="bsk-dropdown">
<button class="bsk-btn bsk-btn-default bsk-dropdown-toggle" type="button" id="dropdown-menu-2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown <span class="bsk-caret"></span>
</button>
<ul class="bsk-dropdown-menu" aria-labelledby="dropdown-menu-2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</div>
Reverse drop-down
Use the .bsk-dropup
class, rather than .bsk-dropdown
to have the drop-down menu open upwards.
<div class="bsk-dropup">
<button class="bsk-btn bsk-btn-default bsk-dropdown-toggle" type="button" id="dropdown-menu-3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropup <span class="bsk-caret"></span>
</button>
<ul class="bsk-dropdown-menu" aria-labelledby="dropdown-menu-3">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</div>
Components
Link
<div class="bsk-dropdown bsk-docs-dropdown-example">
<ul class="bsk-dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</div>
Divider
Use the .dropdown-divider
class on a drop-down item.
<div class="bsk-dropdown bsk-docs-dropdown-example">
<ul class="bsk-dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li role="separator" class="bsk-divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Header
Use the .bsk-dropdown-header
class on a drop-down item.
<div class="bsk-dropdown bsk-docs-dropdown-example">
<ul class="bsk-dropdown-menu">
<li><a href="#">Action</a></li>
<li class="bsk-dropdown-header">Dropdown header</li>
<li><a href="#">Another action</a></li>
</ul>
</div>
States
Active item
If used within the Navbar component, add the .bsk-active
class
to the drop-down menu item currently active, to highlight where the end user is in the site.
Make sure to include a <span class="bsk-sr-only">(current)</span>
element as well.
This provides a non-visual indication of the currently active item, suitable for assistive technologies.
Heads up! Active drop-down item elements are not yet fully styled, but will be in the next version of the Style Kit.
<div class="bsk-dropdown bsk-docs-dropdown-example">
<ul class="bsk-dropdown-menu">
<li class="bsk-active"><span class="bsk-sr-only">(current)</span><a href="#">Active Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</div>
Disabled item
<div class="bsk-disabled-dropdown bsk-docs-dropdown-example">
<ul class="bsk-dropdown-menu">
<li class="bsk-disabled"><a href="#" disabled>Disabled Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</div>
Layouts
Drop-down alignment
Add the .bsk-dropdown-menu-right
class to right align the drop-down menu
supported element, by default the menu is
left aligned.
<div class="bsk-dropdown">
<button class="bsk-btn bsk-btn-default bsk-dropdown-toggle" type="button" id="dropdown-menu-4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown (right aligned) <span class="bsk-caret"></span>
</button>
<ul class="bsk-dropdown-menu bsk-dropdown-menu-right" aria-labelledby="dropdown-menu-4">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
</ul>
</div>