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 →
PromoSimple is a simple online giveaway maker. Connect it to your Social Accounts and Email Tools. Kick back and watch your lists grow. Click here to get started.
[stack_hero image=”38″]
[/stack_hero]
[stack_boxed_content padding=”boxed–lg” background=”bg–secondary”]
[/stack_boxed_content]
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 .dropdown element with a .dropdown__trigger which when clicked, will display the dropdown housed inside the .dropdown__container element.
The width of the dropdowns are controlled using the Bootstrap column classes.
[stack_dropdown title=”Trigger Dropdown”]
[/stack_dropdown]
I’m the content inside the .dropdown__content element. My width is controlled using the Bootstrap column classes. You can read more about those here
[stack_boxed_content padding=”boxed–lg” background=”bg–secondary”]
[/stack_boxed_content]
Menu Dropdown
Easily create dropdown menus by nesting .menu-vertical elements inside the dropdowns.
[stack_dropdown column_width=”2″ title=”Trigger Dropdown”]
[/stack_dropdown]
Select an option
[stack_boxed_content padding=”boxed–lg” background=”bg–secondary”]
[/stack_boxed_content]
Hover Dropdown
By default, dropdowns are triggered by clicking the .dropdown__trigger element. If you would prefer the hover to react upon hovering, you can add the class .dropdown–hover to the .dropdown element.
If you would prefer all dropdowns to react to hover instead of click, add the class .dropdowns–hover to the <body> element.
[stack_dropdown column_width=”2″ title=”Dropdown Menu” custom_css_class=”dropdown–hover”]
[/stack_dropdown]