Dropdown

An interactive dropdown menu for discoverable content

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

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

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

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

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

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

Variables #

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

Name	Type	Default value	Computed value
Name	Type	Default value	Computed value
`$dropdown-menu-min-width`	size	`12rem`
`$dropdown-content-background-color`	color	`$scheme-main`	`hsl(0, 0%, 100%)`
`$dropdown-content-arrow`	color	`$link`	`hsl(217, 71%, 53%)`
`$dropdown-content-offset`	size	`4px`
`$dropdown-content-padding-bottom`	size	`0.5rem`
`$dropdown-content-padding-top`	size	`0.5rem`
`$dropdown-content-radius`	size	`$radius`	`4px`
`$dropdown-content-shadow`	size	`0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02)`
`$dropdown-content-z`	string	`20`
`$dropdown-item-color`	color	`$text`	`hsl(0, 0%, 29%)`
`$dropdown-item-hover-color`	color	`$scheme-invert`	`hsl(0, 0%, 4%)`
`$dropdown-item-hover-background-color`	color	`$background`	`hsl(0, 0%, 96%)`
`$dropdown-item-active-color`	color	`$link-invert`	`#fff`
`$dropdown-item-active-background-color`	color	`$link`	`hsl(217, 71%, 53%)`
`$dropdown-divider-background-color`	color	`$border-light`	`hsl(0, 0%, 93%)`