It appears as a modal for tablets and smartphones, more precisely when the screen is narrower than $dropdown-mobile-breakpoint. However, dropdowns with "hover" trigger won't change its behavior to avoid any malfunction with hover. "hover" trigger works like "click" trigger on touch devices where hover events do not make sense. "hover" trigger precedes "click" trigger.
Dropdown
Dropdowns are very versatile, can used as a quick menu or even like a select for discoverable content
<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>
# Links within
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
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
Add the scrollable prop to make the list scrollable.
When the scrollable prop is set to true, use the max-height prop to define the max height of the list.
<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-model | Binding value | Any | — | null |
triggers | Dropdown will be triggered by any events | Array | click,hover,contextmenu,focus | ['click'] |
position | Optional, position of the dropdown relative to the trigger | String | is-top-right, is-top-left, is-bottom-left | Bottom right |
disabled | Disables dropdown | Boolean | — | false |
animation | Custom animation (transition name) | String | — | fade |
inline | Dropdown content (items) are shown inline, trigger is removed | Boolean | — | false |
mobile-modal | Dropdown content (items) are shown into a modal on mobile | Boolean | — | true |
expanded | Dropdown will be expanded (full-width) | Boolean | — | false |
aria-role | Role 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 | — |
multiple | Allows multiple selections | Boolean | — | false |
trap-focus | Trap focus inside the dropdown. | Boolean | — | true |
can-close | Can close dropdown by pressing escape or by clicking outside | Boolean, Array | escape, outside | true |
close-on-click | Close dropdown when content is clicked | Boolean | — | true |
append-to-body | Append dropdown content to body (prevents event bubbling) | Boolean | — | false |
scrollable | Dropdown content will be scrollable | Boolean | — | false |
max-height | Max height of dropdown content | String, Number | — | 200px |
trigger-tabindex | Set the tabindex attribute on the dropdown trigger div (-1 to prevent selection via tab key) | Number | - | 0 |
Item
Name | Description | Type | Values | Default |
|---|---|---|---|---|
value | The value that will be returned on events and v-model | Any | — | null |
separator | Set the item to be a separator | Boolean | — | false |
disabled | Item is disabled | Boolean | — | false |
focusable | Item can be focused | Boolean | — | true |
custom | Item is not a clickable item | Boolean | — | false |
has-link | Use it if your item is an anchor tag or router-link | Boolean | — | false |
paddingless | Remove padding | Boolean | — | false |
aria-role | Role 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-breakpoint | The dropdown will be displayed as a modal below this value. | $desktop |
$dropdown-background-color | Modal 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 variables | Link |
This page is open source. Noticed a typo or something's unclear?