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">
            <button class="button is-primary" slot="trigger" slot-scope="{ active }">
                <span>Click me!</span>
                <b-icon :icon="active ? 'menu-up' : 'menu-down'"></b-icon>
            </button>

            <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 hoverable aria-role="list">
            <button class="button is-info" slot="trigger">
                <span>Hover me!</span>
                <b-icon icon="menu-down"></b-icon>
            </button>

            <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">
            <button class="button" slot="trigger">
                <span>Disabled</span>
                <b-icon icon="menu-down"></b-icon>
            </button>

            <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">
            <p
                class="tag is-success"
                slot="trigger"
                role="button">
                Custom trigger
            </p>

            <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 position="is-bottom-left" append-to-body aria-role="menu" trap-focus>
                    <a
                        class="navbar-item"
                        slot="trigger"
                        role="button">
                        <span>Login</span>
                        <b-icon icon="menu-down"></b-icon>
                    </a>

                    <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">
                                    <button class="button is-primary">Login</button>
                                </footer>
                            </div>
                        </form>
                    </b-dropdown-item>
                </b-dropdown>
            </div>
        </div>
    </nav>
</template>

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">
                    <a
                        class="navbar-item"
                        slot="trigger"
                        role="button">
                        <span>Menu</span>
                        <b-icon icon="menu-down"></b-icon>
                    </a>

                    <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">
        <button class="button is-primary" type="button" slot="trigger">
            <template v-if="isPublic">
                <b-icon icon="earth"></b-icon>
                <span>Public</span>
            </template>
            <template v-else>
                <b-icon icon="account-multiple"></b-icon>
                <span>Friends</span>
            </template>
            <b-icon icon="menu-down"></b-icon>
        </button>

        <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

Since 0.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">
            <button class="button is-primary" type="button" slot="trigger">
                <span>Selected ({{ selectedOptions.length }})</span>
                <b-icon icon="menu-down"></b-icon>
            </button>

            <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

Since 0.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"
        >
            <button class="button is-primary" type="button" slot="trigger">
                <template>
                    <b-icon :icon="currentMenu.icon"></b-icon>
                    <span>{{currentMenu.text}}</span>
                </template>
                <b-icon icon="menu-down"></b-icon>
            </button>

            <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 value Any null
hoverableDropdown will be triggered by hover instead of click Boolean false
positionOptional, position of the dropdown relative to the trigger String is-top-right, is-top-left, is-bottom-leftBottom right
disabledDisables dropdown Boolean false
animationCustom animation (transition name) String fade
inlineDropdown content (items) are shown inline, trigger is removed Boolean false
mobile-modalDropdown content (items) are shown into a modal on mobile Boolean true
expandedDropdown will be expanded (full-width) Boolean false
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. String list, menu, dialog
multipleAllows multiple selections Boolean false
trap-focusTrap focus inside the dropdown. Boolean false
can-closeCan close dropdown by pressing escape or by clicking outside Boolean, Array escape, outsidetrue
close-on-clickClose dropdown when content is clicked Boolean true
append-to-bodyAppend dropdown content to body Boolean false
scrollableDropdown content will be scrollable Boolean false
max-heightMax height of dropdown content String, Number 200px

Item

Name
Description
Type
Values
Default
valueThe value that will be returned on events and v-model Any null
separatorSet the item to be a separator Boolean false
disabledItem is disabled Boolean false
focusableItem can be focused Boolean true
customItem is not a clickable item Boolean false
has-linkUse it if your item is an anchor tag or router-link Boolean false
paddinglessRemove padding Boolean false
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. String listitem, 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($black, 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