# Bulma v0.5.0: a modern CSS framework based on Flexbox
Bulma v0.5.0 is an open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

You are viewing the deprecated 0.5.0 version of the website. Click here to view the latest version

Documentation

Everything you need to create a website with Bulma

# Dropdown

## An interactive dropdown menu for discoverable content

New!
Since 0.4.4
Colors No
Sizes No
Variables Yes

The `dropdown` component is a container for a dropdown button and a dropdown menu.

- `dropdown` the main container
  - `dropdown-trigger` the container for a `button`
  - `dropdown-menu` the toggable menu, hidden by default
    - `dropdown-content` the dropdown box, with a white background and a shadow
      - `dropdown-item` each single item of the dropdown, which can either be a `a` or a `div`
      - `dropdown-divider` a horizontal line to separate dropdown items

    <div class="dropdown is-active">
      <div class="dropdown-trigger">
        <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
          <span>Dropdown button</span>
          <span class="icon is-small">
            <i class="fa fa-angle-down" aria-hidden="true"></i>
          </span>
        </button>
      </div>
      <div class="dropdown-menu" id="dropdown-menu" role="menu">
        <div class="dropdown-content">
          <a href="#" class="dropdown-item">
            Dropdown item
          </a>
          <a class="dropdown-item">
            Other dropdown item
          </a>
          <a href="#" class="dropdown-item is-active">
            Active dropdown item
          </a>
          <a href="#" class="dropdown-item">
            Other dropdown item
          </a>
          <hr class="dropdown-divider">
          <a href="#" class="dropdown-item">
            With a divider
          </a>
        </div>
      </div>
    </div>

### Dropdown content

While the `dropdown-item` can be used as an anchor link `<a>`, you can also use a `<div>` and insert almost any type of content.

    <div class="dropdown is-active">
      <div class="dropdown-trigger">
        <button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu2">
          <span>Content</span>
          <span class="icon is-small">
            <i class="fa fa-angle-down" aria-hidden="true"></i>
          </span>
        </button>
      </div>
      <div class="dropdown-menu" id="dropdown-menu2" role="menu">
        <div class="dropdown-content">
          <div class="dropdown-item">
            <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
          </div>
          <hr class="dropdown-divider">
          <div class="dropdown-item">
            <p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
          </div>
          <hr class="dropdown-divider">
          <a href="#" class="dropdown-item">
            This is a link
          </a>
        </div>
      </div>
    </div>

### Hoverable or Toggable

The `dropdown` component has 2 additional modifiers

- `is-hoverable`: the dropdown will show up when hovering the `dropdown-trigger`
- `is-active`: the dropdown will show up all the time

While the CSS `:hover` implementation works perfectly, the `is-active` class is available for users who want to control the display of the dropdown with JavaScript.

    <div class="dropdown">
      <div class="dropdown-trigger">
        <button class="button is-primary" aria-haspopup="true" aria-controls="dropdown-menu3">
          <span>Click me</span>
          <span class="icon is-small">
            <i class="fa fa-angle-down" aria-hidden="true"></i>
          </span>
        </button>
      </div>
      <div class="dropdown-menu" id="dropdown-menu3" role="menu">
        <div class="dropdown-content">
          <a href="#" class="dropdown-item">
            Overview
          </a>
          <a href="#" class="dropdown-item">
            Modifiers
          </a>
          <a href="#" class="dropdown-item">
            Grid
          </a>
          <a href="#" class="dropdown-item">
            Form
          </a>
          <a href="#" class="dropdown-item">
            Elements
          </a>
          <a href="#" class="dropdown-item">
            Components
          </a>
          <a href="#" class="dropdown-item">
            Layout
          </a>
          <hr class="dropdown-divider">
          <a href="#" class="dropdown-item">
            More
          </a>
        </div>
      </div>
    </div>

    <div class="dropdown is-hoverable">
      <div class="dropdown-trigger">
        <button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu4">
          <span>Hover me</span>
          <span class="icon is-small">
            <i class="fa fa-angle-down" aria-hidden="true"></i>
          </span>
        </button>
      </div>
      <div class="dropdown-menu" id="dropdown-menu4" role="menu">
        <div class="dropdown-content">
          <div class="dropdown-item">
            <p>You can insert <strong>any type of content</strong> within the dropdown menu.</p>
          </div>
        </div>
      </div>
    </div>

### Right aligned

You can add the `is-right` modifier to have a right-aligned dropdown.

    <div class="dropdown is-right is-active">
      <div class="dropdown-trigger">
        <button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu6">
          <span>Right aligned</span>
          <span class="icon is-small">
            <i class="fa fa-angle-down" aria-hidden="true"></i>
          </span>
        </button>
      </div>
      <div class="dropdown-menu" id="dropdown-menu6" role="menu">
        <div class="dropdown-content">
          <div class="dropdown-item">
            <p>Add the <code>is-right</code> modifier for a <strong>right-aligned</strong> dropdown.</p>
          </div>
        </div>
      </div>
    </div>

### Variables #

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.

Name | Default value
--- | ---
Name | Default value
`$dropdown-content-background-color` | `$white`
`$dropdown-content-arrow` | `$link`
`$dropdown-content-offset` | `4px`
`$dropdown-content-radius` | `$radius`
`$dropdown-content-shadow` | `0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)`
`$dropdown-content-z` | `20`
`$dropdown-item-color` | `$grey-dark`
`$dropdown-item-hover-color` | `$black`
`$dropdown-item-hover-background-color` | `$background`
`$dropdown-item-active-color` | `$primary-invert`
`$dropdown-item-active-background-color` | `$primary`
`$dropdown-divider-background-color` | `$border`

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!