You are viewing the deprecated 0.4.4 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! 0.4.4

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

Dropdown button

    <div class="dropdown is-active">
      <div class="dropdown-trigger">
        <a class="button">
          <span>Dropdown button</span>
          <span class="icon is-small">
            <i class="fa fa-angle-down"></i>
          </span>
        </a>
      </div>
      <div class="dropdown-menu">
        <div class="dropdown-content">
          <a class="dropdown-item">
            Dropdown item
          </a>
          <a class="dropdown-item">
            Other dropdown item
          </a>
          <a class="dropdown-item is-active">
            Active dropdown item
          </a>
          <a class="dropdown-item">
            Other dropdown item
          </a>
          <hr class="dropdown-divider">
          <a 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.

Content

    <div class="dropdown is-active">
      <div class="dropdown-trigger">
        <a class="button is-info">
          <span>Content</span>
          <span class="icon is-small">
            <i class="fa fa-angle-down"></i>
          </span>
        </a>
      </div>
      <div class="dropdown-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 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.

Click me
Hover me

    <div class="dropdown">
      <div class="dropdown-trigger">
        <a class="button is-primary">
          <span>Click me</span>
          <span class="icon is-small">
            <i class="fa fa-angle-down"></i>
          </span>
        </a>
      </div>
      <div class="dropdown-menu">
        <div class="dropdown-content">
          <a class="dropdown-item">
            Overview
          </a>
          <a class="dropdown-item">
            Modifiers
          </a>
          <a class="dropdown-item">
            Grid
          </a>
          <a class="dropdown-item">
            Form
          </a>
          <a class="dropdown-item">
            Elements
          </a>
          <a class="dropdown-item">
            Components
          </a>
          <a class="dropdown-item">
            Layout
          </a>
          <hr class="dropdown-divider">
          <a class="dropdown-item">
            More
          </a>
        </div>
      </div>
    </div>

    <div class="dropdown is-hoverable">
      <div class="dropdown-trigger">
        <a class="button is-info">
          <span>Hover me</span>
          <span class="icon is-small">
            <i class="fa fa-angle-down"></i>
          </span>
        </a>
      </div>
      <div class="dropdown-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.

Left aligned
Right aligned

    <div class="dropdown is-right is-active">
      <div class="dropdown-trigger">
        <a class="button is-info">
          <span>Right aligned</span>
          <span class="icon is-small">
            <i class="fa fa-angle-down"></i>
          </span>
        </a>
      </div>
      <div class="dropdown-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>

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!