Dropdown

A simple and interactive dropdown menu

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

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

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

Triggers

Hover

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 
Copy

Active

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 
Copy

Right alignment

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

Variables

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