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

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>
  </ul>
</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

CSS variables

You can customize the dropdown elements with the following CSS variables.

.dropdown {
  --background-color: var(--color-white);
  --font-color: var(--color-black);
  --border-color: hsl(0deg, 0%, 80%, 0.34);
  --border-width: 1px;
  --border-radius: 0;
  --box-shadow: 0 6px 6px hsl(0deg, 0%, 4%, 0.16);
  --min-width: 12rem;
  --padding: 10px 0;
}

/* Dropdown link */
.dropdown__link {
  --font-color: inherit;
  --padding: 5px 15px;
  --hover-font-color: inherit;
  --hover-background-color: hsl(0deg, 0%, 75%, 0.09);
}

/* Dropdown divider */
.dropdown__divider {
  --color: hsl(210deg, 16%, 92%, 1);
  --margin: 5px 0;
}

/* Dropdown item */
.dropdown__item {
  --font-color: inherit;
  --padding: 5px 15px;
}
Copy

Sass variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.