Download

Start Here

Features

Sass Tools

Customization

CSS Library

CSS Helpers

Sponsor

Password.link

Dropdown

An interactive dropdown menu for discoverable content

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

Example

HTML 

<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="fas 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.

Example

HTML 

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu2">
      <span>Content</span>
      <span class="icon is-small">
        <i class="fas 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.

Example

HTML 

<div class="dropdown">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu3">
      <span>Click me</span>
      <span class="icon is-small">
        <i class="fas 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>

Example

HTML 

<div class="dropdown is-hoverable">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu4">
      <span>Hover me</span>
      <span class="icon is-small">
        <i class="fas 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.

Example

HTML 

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu5">
      <span>Left aligned</span>
      <span class="icon is-small">
        <i class="fas fa-angle-down" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu5" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>The dropdown is <strong>left-aligned</strong> by default.</p>
      </div>
    </div>
  </div>
</div>

Example

HTML 

<div class="dropdown is-right is-active">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu6">
      <span>Right aligned</span>
      <span class="icon is-small">
        <i class="fas 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>

Dropup #

You can add the is-up modifier to have a dropdown menu that appears above the dropdown button.

Example

HTML 

<div class="dropdown is-up">
  <div class="dropdown-trigger">
    <button class="button" aria-haspopup="true" aria-controls="dropdown-menu7">
      <span>Dropup button</span>
      <span class="icon is-small">
        <i class="fas fa-angle-up" aria-hidden="true"></i>
      </span>
    </button>
  </div>
  <div class="dropdown-menu" id="dropdown-menu7" role="menu">
    <div class="dropdown-content">
      <div class="dropdown-item">
        <p>
          You can add the <code>is-up</code> modifier to have a dropdown menu
          that appears above the dropdown button.
        </p>
      </div>
    </div>
  </div>
</div>

Sass and CSS variables #

Sass Variable
CSS Variable
Value 
$dropdown-menu-min-width
 
var(--bulma-dropdown-menu-min-width)
 
12rem
 
$dropdown-content-background-color
 
var(--bulma-dropdown-content-background-color)
 
var(--bulma-scheme-main)
 
$dropdown-content-offset
 
var(--bulma-dropdown-content-offset)
 
0.25rem
 
$dropdown-content-padding-bottom
 
var(--bulma-dropdown-content-padding-bottom)
 
0.5rem
 
$dropdown-content-padding-top
 
var(--bulma-dropdown-content-padding-top)
 
0.5rem
 
$dropdown-content-radius
 
var(--bulma-dropdown-content-radius)
 
var(--bulma-radius)
 
$dropdown-content-shadow
 
var(--bulma-dropdown-content-shadow)
 
var(--bulma-shadow)
 
$dropdown-content-z
 
var(--bulma-dropdown-content-z)
 
20
 
$dropdown-divider-background-color
 
var(--bulma-dropdown-divider-background-color)
 
var(--bulma-border-weak)

How to support Bulma

One-time donation

Visit our Sponsors

Monthly donation

Become a sponsor
#native_company# #native_desc#
#native_cta#