Dropdowns are contextual toggle menus that drop down from their anchor link. They can be used as standalone menus or within the navbar component.

Sass Configuration:

Name Type Default Description
$dropdown-menu-min-width Number 160px Set min-width of dropdown
$dropdown-link-color Color white Set text color of dropdown
$dropdown-menu-bg Color palette(primary, dark) Set background color of dropdown
$dropdown-menu-hover-bg Color palette(primary, light) Set background hover color of dropdown
$dropdown-menu-link-padding Number $line-height/2 Set padding on active dropdown links

Example Code:

<!-- Basic Dropdown menu -->
<ul class="dropdown-menu">
    <li class="dropdown-menu-toggle" data-toggle="dropdown">
        <a href="#">Dropdown Menu</a>
        <ul class="dropdown-menu-content">
            <li><a role="menuitem" href="#">Linkylink</a></li>
            <li><a role="menuitem" href="#">Linkylink</a></li>
            <li><a role="menuitem" href="#">Linkylink</a></li>
        </ul>
    </li>
</ul>