Dropdown

Dropdowns are very versatile, can used as a quick menu or even like a select for discoverable content

While it appear as a modal for tablet and smartphones, Dropdowns with hoverable prop won't change it's behavior to avoid any malfunction with hover.

<template>
    <section>

        <b-dropdown aria-role="list">
            <template #trigger="{ active }">
                <b-button
                    label="Click me!"
                    type="is-primary"
                    :icon-right="active ? 'menu-up' : 'menu-down'" />
            </template>


            <b-dropdown-item aria-role="listitem">Action</b-dropdown-item>
            <b-dropdown-item aria-role="listitem">Another action</b-dropdown-item>
            <b-dropdown-item aria-role="listitem">Something else</b-dropdown-item>
        </b-dropdown>

        <b-dropdown :triggers="['hover']" aria-role="list">
            <template #trigger>
                <b-button
                    label="Hover me!"
                    type="is-info"
                    icon-right="menu-down" />
            </template>


            <b-dropdown-item aria-role="listitem">Action</b-dropdown-item>
            <b-dropdown-item aria-role="listitem">Another action</b-dropdown-item>
            <b-dropdown-item aria-role="listitem">Something else</b-dropdown-item>
        </b-dropdown>

        <b-dropdown disabled aria-role="list">
            <template #trigger>
                <b-button
                    label="Disabled"
                    icon-right="menu-down" />
            </template>


            <b-dropdown-item aria-role="listitem">Action</b-dropdown-item>
            <b-dropdown-item aria-role="listitem">Another action</b-dropdown-item>
            <b-dropdown-item aria-role="listitem">Something else</b-dropdown-item>
        </b-dropdown>

        <b-dropdown aria-role="list">
            <template #trigger>
                <p
                    class="tag is-success"
                    role="button">
                    Custom trigger
                </p>
            </template>


            <b-dropdown-item aria-role="listitem">Action</b-dropdown-item>
            <b-dropdown-item aria-role="listitem">Another action</b-dropdown-item>
            <b-dropdown-item aria-role="listitem">Something else</b-dropdown-item>
        </b-dropdown>

        <b-dropdown :triggers="['contextmenu']" aria-role="list">
            <template #trigger>
                <b-button
                    type="is-link"
                    label="Right click" />
            </template>


            <b-dropdown-item aria-role="listitem">Action</b-dropdown-item>
            <b-dropdown-item aria-role="listitem">Another action</b-dropdown-item>
            <b-dropdown-item aria-role="listitem">Something else</b-dropdown-item>
        </b-dropdown>
    </section>
</template>

<style scoped>
    .tag {
        cursor: pointer;
    }
</style>

# Content and position

Add the custom prop to the item to add any type of content.

Add the :focusable="false" prop to the dropdown-item if you dont want it to be focusable.

<template>
    <nav class="navbar">
        <div class="navbar-brand">
            <a class="navbar-item">
                <img src="/static/img/buefy-logo.png" alt="Buefy">
            </a>
            <a class="navbar-item"><b-icon pack="fab" icon="github"></b-icon></a>
            <a class="navbar-item"><b-icon pack="fab" icon="twitter"></b-icon></a>
        </div>

        <div class="navbar-menu">
            <div class="navbar-end">
                <b-dropdown
                    append-to-body
                    aria-role="menu"
                    scrollable
                    max-height="200"
                    trap-focus
                >
                    <template #trigger>
                        <a
                            class="navbar-item"
                            role="button">
                            <span>Categories</span>
                            <b-icon icon="menu-down"></b-icon>
                        </a>
                    </template>

                    <b-dropdown-item custom aria-role="listitem">
                      <b-input v-model="searchTerm" placeholder="search" expanded />
                  </b-dropdown-item>

                    <b-dropdown-item v-for="item of filteredData" :key="item" aria-role="listitem">{{item}}</b-dropdown-item>
                </b-dropdown>

                <b-dropdown
                    position="is-bottom-left"
                    append-to-body
                    aria-role="menu"
                    trap-focus
                >
                    <template #trigger>
                        <a
                            class="navbar-item"
                            role="button">
                            <span>Login</span>
                            <b-icon icon="menu-down"></b-icon>
                        </a>
                    </template>


                    <b-dropdown-item
                        aria-role="menu-item"
                        :focusable="false"
                        custom
                        paddingless>
                        <form action="">
                            <div class="modal-card" style="width:300px;">
                                <section class="modal-card-body">
                                    <b-field label="Email">
                                        <b-input
                                            type="email"
                                            placeholder="Your email"
                                            required>
                                        </b-input>
                                    </b-field>

                                    <b-field label="Password">
                                        <b-input
                                            type="password"
                                            password-reveal
                                            placeholder="Your password"
                                            required>
                                        </b-input>
                                    </b-field>

                                    <b-checkbox>Remember me</b-checkbox>
                                </section>
                                <footer class="modal-card-foot">
                                    <b-button
                                        label="Login"
                                        type="is-primary" />
                                </footer>
                            </div>
                        </form>
                    </b-dropdown-item>
                </b-dropdown>
            </div>
        </div>
    </nav>
</template>

<script>
    export default {
        data() {
            return {
                searchTerm: '',
                  data: [
                    'Angular',
                    'Angular 2',
                    'Aurelia',
                    'Backbone',
                    'Ember',
                    'jQuery',
                    'Meteor',
                    'Node.js',
                    'Polymer',
                    'React',
                    'RxJS',
                    'Vue.js'
                ],
            }
        },
        computed: {
            filteredData() {
                return this.data.filter((item) => item.toLowerCase().indexOf(this.searchTerm.toLowerCase()) >= 0);
            }
        }
    }
</script>

Add the has-link prop to add a anchor tag / router-link, or disabled to disable an item.

<template>
    <nav class="navbar">
        <div class="navbar-brand">
            <a class="navbar-item">
                <img src="/static/img/buefy-logo.png" alt="Buefy">
            </a>
            <a class="navbar-item"><b-icon pack="fab" icon="github"></b-icon></a>
            <a class="navbar-item"><b-icon pack="fab" icon="twitter"></b-icon></a>
        </div>

        <div class="navbar-menu">
            <div class="navbar-end">
                <b-dropdown
                    v-model="navigation"
                    position="is-bottom-left"
                    append-to-body
                    aria-role="menu">
                    <template #trigger>
                        <a
                            class="navbar-item"
                            role="button">
                            <span>Menu</span>
                            <b-icon icon="menu-down"></b-icon>
                        </a>
                    </template>


                    <b-dropdown-item custom aria-role="menuitem">
                        Logged as <b>Rafael Beraldo</b>
                    </b-dropdown-item>
                    <hr class="dropdown-divider">
                    <b-dropdown-item has-link aria-role="menuitem">
                        <a href="https://google.com" target="_blank">
                            <b-icon icon="link"></b-icon>
                            Google (link)
                        </a>
                    </b-dropdown-item>
                    <b-dropdown-item value="home" aria-role="menuitem">
                        <b-icon icon="home"></b-icon>
                        Home
                    </b-dropdown-item>
                    <b-dropdown-item value="products" aria-role="menuitem">
                        <b-icon icon="cart"></b-icon>
                        Products
                    </b-dropdown-item>
                    <b-dropdown-item value="blog" disabled aria-role="menuitem">
                        <b-icon icon="book-open"></b-icon>
                        Blog
                    </b-dropdown-item>
                    <hr class="dropdown-divider" aria-role="menuitem">
                    <b-dropdown-item value="settings">
                        <b-icon icon="settings"></b-icon>
                        Settings
                    </b-dropdown-item>
                    <b-dropdown-item value="logout" aria-role="menuitem">
                        <b-icon icon="logout"></b-icon>
                        Logout
                    </b-dropdown-item>
                </b-dropdown>
            </div>
        </div>
    </nav>
</template>

<script>
    export default {
        data() {
            return {
                navigation: 'home'
            }
        }
    }
</script>

# Customizing with v-model

<template>
    <b-dropdown v-model="isPublic" aria-role="list">

        <template v-if="isPublic" #trigger>
            <b-button
                label="Public"
                type="is-primary"
                icon-left="earth"
                icon-right="menu-down" />
        </template>

        <template v-else #trigger>
            <b-button
                label="Friends"
                type="is-primary"
                icon-left="account-multiple"
                icon-right="menu-down" />
        </template>


        <b-dropdown-item :value="true" aria-role="listitem">
            <div class="media">
                <b-icon class="media-left" icon="earth"></b-icon>
                <div class="media-content">
                    <h3>Public</h3>
                    <small>Everyone can see</small>
                </div>
            </div>
        </b-dropdown-item>

        <b-dropdown-item :value="false" aria-role="listitem">
            <div class="media">
                <b-icon class="media-left" icon="account-multiple"></b-icon>
                <div class="media-content">
                    <h3>Friends</h3>
                    <small>Only friends can see</small>
                </div>
            </div>
        </b-dropdown-item>
    </b-dropdown>
</template>

<script>
    export default {
        data() {
            return {
                isPublic: true
            }
        }
    }
</script>

# Multiple

Since0.7.6

Add the multiple prop to select one or more item.

selected: []

<template>
    <section>
        <p class="content"><b>selected</b>: {{ selectedOptions }}</p>
        <b-dropdown
            v-model="selectedOptions"
            multiple
            aria-role="list">
            <template #trigger>
                <b-button
                    type="is-primary"
                    icon-right="menu-down">
                    Selected ({{ selectedOptions.length }})
                </b-button>
            </template>


            <b-dropdown-item value="option1" aria-role="listitem">
                <span>Option 1</span>
            </b-dropdown-item>

            <b-dropdown-item value="option2" aria-role="listitem">
                <span>Option 2</span>
            </b-dropdown-item>

            <b-dropdown-item value="option3" aria-role="listitem">
                <span>Option 3</span>
            </b-dropdown-item>
        </b-dropdown>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                selectedOptions: []
            }
        }
    }
</script>

# Scrollable

Since0.8.18

Add the scrollable prop to make the list scollable.

When the scrollable prop is set to true, use the max-height prop to define the max height of the list.

100
150
200
<template>
    <section>
        <div class="block">
            <b-field>
                <div class="control">
                    <b-switch v-model="isScrollable">Scrollable</b-switch>
                </div>
            </b-field>
            <b-field label="Max Height">
                <div class="control">
                    <b-slider v-model="maxHeight" :min="50" :max="250" rounded :disabled="!isScrollable">
                        <template v-for="val in [100, 150, 200]">
                            <b-slider-tick :value="val" :key="val">{{ val }}</b-slider-tick>
                        </template>
                    </b-slider>
                </div>
            </b-field>
        </div>

        <b-dropdown
            :scrollable="isScrollable"
            :max-height="maxHeight"
            v-model="currentMenu"
            aria-role="list"
        >
            <template #trigger>
                <b-button
                    :label="currentMenu.text"
                    type="is-primary"
                    :icon-left="currentMenu.icon"
                    icon-right="menu-down" />
            </template>


            <b-dropdown-item
                v-for="(menu, index) in menus"
                :key="index"
                :value="menu" aria-role="listitem">
                <div class="media">
                    <b-icon class="media-left" :icon="menu.icon"></b-icon>
                    <div class="media-content">
                        <h3>{{menu.text}}</h3>
                    </div>
                </div>
            </b-dropdown-item>
        </b-dropdown>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                isScrollable: false,
                maxHeight: 200,
                currentMenu: { icon: 'account-group', text: 'People' },
                menus: [
                    { icon: 'account-group', text: 'People' },
                    { icon: 'shopping-search', text: 'Orders' },
                    { icon: 'credit-card-multiple', text: 'Payments' },
                    { icon: 'dolly', text: 'Logistics' },
                    { icon: 'clock-check', text: 'Jobs' },
                    { icon: 'cart-arrow-right', text: 'Cart' },
                    { icon: 'settings', text: 'Configuration' }
                ]
            }
        }
    }
</script>

# API

Dropdown

Name
Description
Type
Values
Default
v-modelBinding valueAnynull
triggersDropdown will be triggered by any eventsArrayclick,hover,contextmenu,focus['click']
positionOptional, position of the dropdown relative to the triggerStringis-top-right, is-top-left, is-bottom-leftBottom right
disabledDisables dropdownBooleanfalse
animationCustom animation (transition name)Stringfade
inlineDropdown content (items) are shown inline, trigger is removedBooleanfalse
mobile-modalDropdown content (items) are shown into a modal on mobileBooleantrue
expandedDropdown will be expanded (full-width)Booleanfalse
aria-roleRole attribute to be passed to list container for better accessibility. Use menu only in situations where your dropdown is related to navigation menus.Stringlist, menu, dialog
multipleAllows multiple selectionsBooleanfalse
trap-focusTrap focus inside the dropdown.Booleantrue
can-closeCan close dropdown by pressing escape or by clicking outsideBoolean, Arrayescape, outsidetrue
close-on-clickClose dropdown when content is clickedBooleantrue
append-to-bodyAppend dropdown content to bodyBooleanfalse
scrollableDropdown content will be scrollableBooleanfalse
max-heightMax height of dropdown contentString, Number200px

Item

Name
Description
Type
Values
Default
valueThe value that will be returned on events and v-modelAnynull
separatorSet the item to be a separatorBooleanfalse
disabledItem is disabledBooleanfalse
focusableItem can be focusedBooleantrue
customItem is not a clickable itemBooleanfalse
has-linkUse it if your item is an anchor tag or router-linkBooleanfalse
paddinglessRemove paddingBooleanfalse
aria-roleRole attribute to be passed to list item for better accessibility. Use menuitem only in situations where your dropdown is related to navigation menus.Stringlistitem, menuitem

# Variables

You can use these variables to customize this component.

Name
Description
Default
$dropdown-mobile-breakpointThe dropdown will be displayed as a modal below this value.$desktop
$dropdown-background-colorModal background color when the dropdown is shown as a modal.rgba($scheme-invert, 0.86)
$dropdown-disabled-opacity:Defines dropdown disabled opacity.0.5
Bulma variablesLink

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub