since 0.1.0
Data API Yes
Javascript API Yes

Bulma provides a button dropdown component. By default, this component needs Javascript to show/hide the dropdown when the button is clicked/tapped. You can add the is-hover class to show/hide the dropdown when the user places their mouse over the button.

However, the default behaviour for the drop-down component requires a sprinkle of Javascript. The BulmaJS dropdown plugin will allow you to easily allow a dropdown to be shown/hidden via a mouse click.

All you need to do is simply include BulmaJS and the BulmaJS dropdown plugin in your project. We'll handle the rest!

            <div class="dropdown">
    <div class="dropdown-trigger">
        <button class="button is-info" aria-haspopup="true" aria-controls="dropdown-menu2">
            <span class="icon is-small">
                <i class="fa fa-angle-down" aria-hidden="true"></i>
    <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>
            <hr class="dropdown-divider">
            <div class="dropdown-item">
                <p>You simply need to use a <code>&lt;div&gt;</code> instead.</p>
            <hr class="dropdown-divider">
            <a href="#" class="dropdown-item">
                This is a link


These are the events that this plugin emits when various actions happen. These can be listened to by using the on method.

Name Syntax Description
Init on('init') Called once the plugin has finished initialisation.
Open on('open') Called when the dropdown is opened.
Close on('close') Called when the dropdown is closed.