Dropdowns
These modular elements can be readily used and customized across pages and in different blocks.
Explore all of Stack's modular elements
at the Element Index Page →
Basic Dropdown
Stack's dropdowns can serve a number of purposes, from navigation menu to multi-choice button. There are a number of ways to present a dropdown, but all follow the same markup pattern of a parent .dropdownelement with a .dropdown__triggerwhich when clicked, will display the dropdown housed inside the .dropdown__containerelement.
The width of the dropdowns are controlled using the Bootstrap column classes.
<div class="dropdown"> <span class="dropdown__trigger">Trigger Dropdown</span> <div class="dropdown__container"> <div class="container"> <div class="row"> <div class="col-md-3 col-lg-2 dropdown__content"> CONTENT </div> </div><!--end row--> </div><!--end container--> </div><!--end dropdown container--></div>
I'm the content inside the .dropdown__contentelement. My width is controlled using the Bootstrap column classes. You can read more about those here
Menu Dropdown
Easily create dropdown menus by nesting .menu-verticalelements inside the dropdowns.
<div class="dropdown"> <span class="dropdown__trigger">Menu Dropdown</span> <div class="dropdown__container"> <div class="container"> <div class="row"> <div class="col-md-3 col-lg-2 dropdown__content"> <ul class="menu-vertical"> <li> ... </li> <li> ... </li> </ul> </div> </div><!--end row--> </div><!--end container--> </div><!--end dropdown container--></div>
Select an option
Hover Dropdown
By default, dropdowns are triggered by clicking the .dropdown__triggerelement. If you would prefer the hover to react upon hovering, you can add the class .dropdown--hoverto the .dropdownelement.
If you would prefer alldropdowns to react to hover instead of click, add the class .dropdowns--hoverto the <body>element.
<div class="dropdown dropdown--hover">...</div>
<body class="dropdowns--hover">...</body>