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

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

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

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