Skip to main content

Dropdown

Hoverable#


<div class="dropdown dropdown--hoverable">
<button class="button button--primary">Hover Me</button>
<ul class="dropdown__menu">
<li>
<a class="dropdown__link" href="#url">
Home
</a>
</li>
<li>
<a class="dropdown__link" href="#url">
Profile
</a>
</li>
<li>
<a class="dropdown__link" href="#url">
Settings
</a>
</li>
<li>
<a class="dropdown__link" href="#url">
Help
</a>
</li>
<li>
<a class="dropdown__link" href="#url">
Logout
</a>
</li>
</ul>
</div>

Clickable#


<div class="dropdown">
<button class="button button--secondary" data-toggle="dropdown">
Click Me
</button>
<ul class="dropdown__menu">
<li>
<a class="dropdown__link" href="#url">
Home
</a>
</li>
<li>
<a class="dropdown__link" href="#url">
Profile
</a>
</li>
<li>
<a class="dropdown__link" href="#url">
Settings
</a>
</li>
<li>
<a class="dropdown__link" href="#url">
Help
</a>
</li>
<li>
<a class="dropdown__link" href="#url">
Logout
</a>
</li>
</ul>
</div>

Right-Aligned#


<div class="dropdown dropdown--right">
<button class="button button--info" data-toggle="dropdown">
Right-Aligned Long Children
</button>
<ul class="dropdown__menu">
<li>
<a class="dropdown__link" href="#url">
This is a very long item
</a>
</li>
<li>
<a class="dropdown__link" href="#url">
And so is this item
</a>
</li>
<li>
<a class="dropdown__link" href="#url">
Who are you kidding, I&#x27;m the longessssssssst!
</a>
</li>
</ul>
</div>