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.
Dropdown
Dropdowns are very versatile, can used as a quick menu or even like a select for discoverable content
Custom trigger
<template>
<section>
<b-dropdown aria-role="list">
<button class="button is-primary" slot="trigger">
<span>Click 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 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" 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>
# 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"
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
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>
# API
Dropdown
Name | Description | Type | Values | Default |
|---|---|---|---|---|
v-model | Binding value | Any | — | null |
hoverable | Dropdown will be triggered by hover instead of click | Boolean | — | false |
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 |
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 | — |
multiple | Allows multiple selections | Boolean | — | false |
trap-focus | Trap focus inside the dropdown. | Boolean | — | false |
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 |
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($black, 0.86) |
$dropdown-disabled-opacity: | Defines dropdown disabled opacity. | 0.5 |
This page is open source. Noticed a typo or something's unclear?