Dropdown
An interactive dropdown menu 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 ? 'caret-up' : 'caret-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="caret-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="caret-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/buval-logo.png" alt="Buval">
</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="caret-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/buval-logo.png" alt="Buval">
</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="caret-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="shopping-cart"></b-icon>
Products
</b-dropdown-item>
<b-dropdown-item value="blog" disabled aria-role="menuitem">
<b-icon icon="blog"></b-icon>
Blog
</b-dropdown-item>
<hr class="dropdown-divider" aria-role="menuitem">
<b-dropdown-item value="settings">
<b-icon icon="cog"></b-icon>
Settings
</b-dropdown-item>
<b-dropdown-item value="logout" aria-role="menuitem">
<b-icon icon="sign-out"></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="globe"></b-icon>
<span>Public</span>
</template>
<template v-else>
<b-icon icon="user-friends"></b-icon>
<span>Friends</span>
</template>
<b-icon icon="caret-down"></b-icon>
</button>
<b-dropdown-item :value="true" aria-role="listitem">
<div class="media">
<b-icon class="media-left" icon="globe"></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="user-friends"></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="caret-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
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.
<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="caret-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" pack="fas" :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: 'users', text: 'People' },
menus: [
{ icon: 'users', text: 'People' },
{ icon: 'bags-shopping', text: 'Orders' },
{ icon: 'money-bill', text: 'Payments' },
{ icon: 'dolly', text: 'Logistics' },
{ icon: 'box-check', text: 'Jobs' },
{ icon: 'shopping-cart', text: 'Cart' },
{ icon: 'cog', text: 'Configuration' }
]
}
}
}
</script>
API
Dropdown
Name | Description | Type | Value | 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 |
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 | — | 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 |
append-to-body | Append dropdown content to body | Boolean | — | false |
scrollable | Dropdown content will be scrollable | Boolean | — | false |
max-height | Max height of dropdown content | String, Number | — | 200px |
Item
Name | Description | Type | Value | 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, Simply set one or multiple of these variables before importing Buval. Learn how.
Name | Type | Default |
|---|---|---|
$dropdown-menu-min-width | size | 12rem |
$dropdown-content-background-color | color | $scheme-main |
$dropdown-content-arrow | color | $link |
$dropdown-content-offset | size | 4px |
$dropdown-content-padding-bottom | size | 0.5rem |
$dropdown-content-padding-top | size | 0.5rem |
$dropdown-content-radius | size | $radius |
$dropdown-content-shadow | size | 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) |
$dropdown-content-z | string | 20 |
$dropdown-item-color | color | $text |
$dropdown-item-hover-color | color | $scheme-invert |
$dropdown-item-hover-background-color | color | $background |
$dropdown-item-active-color | color | $link-invert |
$dropdown-item-active-background-color | color | $link |
$dropdown-divider-background-color | color | $border-light |
$dropdown-mobile-breakpoint | string | $desktop |
$dropdown-background-color | color | rgba($black, 0.86) |
$dropdown-disabled-opacity: | string | 0.5 |