The dropdown element consists of 3 core components; a wrapper element, a visible trigger and the actual dropdown block.
You can create the wrapper element with the has-dropdown
modifier. This can be applied to a div, li tag, or most other HTML elements.
<div class="has-dropdown">
</div>
The visible trigger can be any HTML element, though common use cases are either buttons or a
tags.
<div class="has-dropdown">
<button class="button is-primary has-arrow">Dropdown button</button>
</div>
Use the has-arrow
modifier to display a dropdown arrow. This can be applied to the trigger element or the wrapper element.
The dropdown block is created with the dropdown
class and the following elements:
dropdown__link
will give the list item clickable traits.dropdown__item
is used for displaying non-clickable content or blocks of text.dropdown__divider
a dividing line.<div class="has-dropdown">
<button class="button is-primary has-arrow">Dropdown button</button>
<ul class="dropdown">
<li class="dropdown__link"><a href="#">Link item 1</a></li>
<li class="dropdown__link"><a href="#">Link item 2</a></li>
<li class="dropdown__link"><a href="#">Link item 3</a></li>
<li class="dropdown__divider"></li>
<li class="dropdown__link">A block of text or custom content</li>
</div>
</div>
The is-hoverable
modifier provides a pure CSS solution for toggling your dropdown menus.
<div class="has-dropdown is-hoverable">
<button class="button is-primary has-arrow">Hover me</button>
<ul class="dropdown">
<li class="dropdown__link"><a href="#">Link item 1</a></li>
<li class="dropdown__link"><a href="#">Link item 2</a></li>
<li class="dropdown__link"><a href="#">Link item 3</a></li>
</div>
</div>
</> Show code
The is-active
modifier will also toggle the dropdown menu. To make use of this you will have to write your own JavaScript. You'll find a basic-level example below.
<div class="has-dropdown">
<button class="button is-primary has-arrow" onclick="this.closest('.has-dropdown').classList.toggle('is-active');">Click me</button>
<ul class="dropdown">
<li class="dropdown__link"><a href="#">Link item 1</a></li>
<li class="dropdown__link"><a href="#">Link item 2</a></li>
<li class="dropdown__link"><a href="#">Link item 3</a></li>
</div>
</div>
</> Show code
You can use the is-right
modifier for a right-aligned dropdown menu.
<div class="has-dropdown is-active is-right">
<button class="button is-primary has-arrow">Hover me</button>
<ul class="dropdown">
<li class="dropdown__item">This is a right aligned dropdown.</li>
</div>
</div>
The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.
| Variable | Type | Default Value |
|---|---|---|
| $dropdown-background | color | $white |
| $dropdown-border | border | 1px solid rgba(205, 205, 205, 0.34) |
| $dropdown-radius | units | 0 |
| $dropdown-shadow | box-shadow | 0 6px 6px rgba(10, 10, 10, 0.16) |
| $dropdown-min-width | units | 12rem |
| $dropdown-padding | padding | 10px 0 |
| $dropdown-link-color | color | $black |
| $dropdown-link-padding | padding | 5px 15px |
| $dropdown-link-hover | color | rgba(192, 192, 192, 0.09) |
| $dropdown-divider-color | color | #e9ecef |
| $dropdown-divider-margin | margin | 5px 0 |
| $dropdown-item-color | color | $black |
| $dropdown-item-padding | padding | 5px 15px |
| $dropdown-arrow-color | color | #7284ff |