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 the div and li tags, 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 link 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>
  </ul>
</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>
  </ul>
</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">Right aligned</button>
  <ul class="dropdown">
    <li class="dropdown__item">This is a right aligned dropdown.</li>
  </ul>
</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.


VariableTypeDefault value
$dropdown-backgroundcolor$white
$dropdown-borderborder1px solid rgba(205, 205, 205, 0.34)
$dropdown-radiusunits0
$dropdown-shadowbox-shadow0 6px 6px rgba(10, 10, 10, 0.16)
$dropdown-min-widthunits12rem
$dropdown-paddingpadding10px 0
$dropdown-link-colorcolor$black
$dropdown-link-paddingpadding5px 15px
$dropdown-link-hovercolorrgba(192, 192, 192, 0.09)
$dropdown-divider-colorcolor#e9ecef
$dropdown-divider-marginmargin5px 0
$dropdown-item-colorcolor$black
$dropdown-item-paddingpadding5px 15px
$dropdown-arrow-colorcolor#7284ff