Dropdowns

# Intro

Dropdowns are toggleable overlays that can display most type of content. Dropdowns should not contain forms or any elements that require multiple interactions since the content container will close as soon as it loses focus.

The contents of the dropdown will not be navigatable using the keyboards or other accessibility tools.

<div class="dropdown">
	<a class="button dropdown-toggle" tabindex="0">Menu <i class="icon lni lni-chevron-down"></i></a>
	<div class="content">
		<ul class="menu">
			...
		</ul>
	</div>
</div>
<div class="dropdown">
	<a class="button dropdown-toggle" tabindex="0">Card <i class="icon lni lni-chevron-down"></i></a>
	<div class="content">
		<div class="card">
			...
		</div>
	</div>
</div>

# Position

By default dropdowns open down and to the left but can be changed with the -right and -top modifiers. Positions can also be combined

<div class="dropdown -top">
	<a class="button dropdown-toggle" tabindex="0">Top <i class="icon lni lni-chevron-up"></i></a>
	<div class="content">
		...
	</div>
</div>
<div class="dropdown -right">
	<a class="button dropdown-toggle" tabindex="0">Right <i class="icon lni lni-chevron-down"></i></a>
	<div class="content">
		...
	</div>
</div>
<div class="dropdown -top -right">
	<a class="button dropdown-toggle" tabindex="0">Top Right <i class="icon lni lni-chevron-up"></i></a>
	<div class="content">
		...
	</div>
</div>

Dropdowns

On this page

# Intro

# Position