Stack | Multipurpose HTML Template with Variant Page Builder
Sign up with Email

Already have an account? Login


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 .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.

<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>
					

Menu Dropdown

Easily create dropdown menus by nesting .menu-vertical elements 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>
					

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.

<div class="dropdown dropdown--hover">
...
</div>
					
<body class="dropdowns--hover">
...
</body>
					

See dropdown elements in action

View Navigation Sections

or try the live builder ↗