Sidebar
A sidebar to use as left/right overlay or static
<template>
<section>
<b-sidebar
type="is-light"
:fullheight="fullheight"
:fullwidth="fullwidth"
:overlay="overlay"
:right="right"
v-model="open"
>
<div class="p-1">
<img
src="/static/img/buefy-logo.png"
alt="Lightweight UI components for Vue.js based on Bulma"
/>
<b-menu>
<b-menu-list label="Menu">
<b-menu-item icon="information-outline" label="Info"></b-menu-item>
<b-menu-item icon="settings">
<template #label="props">
Administrator
<b-icon class="is-pulled-right" :icon="props.expanded ? 'menu-down' : 'menu-up'"></b-icon>
</template>
<b-menu-item icon="account" label="Users"></b-menu-item>
<b-menu-item icon="cellphone-link">
<template #label>
Devices
<b-dropdown aria-role="list" class="is-pulled-right" position="is-bottom-left">
<template #trigger>
<b-icon icon="dots-vertical"></b-icon>
</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>
</template>
</b-menu-item>
<b-menu-item icon="cash-multiple" label="Payments" disabled></b-menu-item>
</b-menu-item>
<b-menu-item icon="account" label="My Account">
<b-menu-item label="Account data"></b-menu-item>
<b-menu-item label="Addresses"></b-menu-item>
</b-menu-item>
</b-menu-list>
<b-menu-list>
<b-menu-item label="Expo" icon="link" tag="router-link" target="_blank" to="/expo"></b-menu-item>
</b-menu-list>
<b-menu-list label="Actions">
<b-menu-item label="Logout"></b-menu-item>
</b-menu-list>
</b-menu>
</div>
</b-sidebar>
<div class="block">
<b-field grouped group-multiline>
<div class="control">
<b-switch v-model="overlay">Overlay</b-switch>
</div>
<div class="control">
<b-switch v-model="fullheight">Fullheight</b-switch>
</div>
<div class="control">
<b-switch v-model="fullwidth">Fullwidth</b-switch>
</div>
<div class="control">
<b-switch v-model="right">Right</b-switch>
</div>
</b-field>
</div>
<b-button @click="open = true">Show</b-button>
</section>
</template>
<script>
export default {
data() {
return {
open: false,
overlay: true,
fullheight: true,
fullwidth: false,
right: false
};
}
};
</script>
<style>
.p-1 {
padding: 1em;
}
</style>
# Static
<template>
<div class="sidebar-page">
<section class="sidebar-layout">
<b-sidebar
position="static"
:mobile="mobile"
:expand-on-hover="expandOnHover"
:reduce="reduce"
:delay="expandWithDelay ? 500 : null"
type="is-light"
open
>
<div class="p-1">
<div class="block">
<img
src="/static/img/buefy-logo.png"
alt="Lightweight UI components for Vue.js based on Bulma"
/>
</div>
<b-menu class="is-custom-mobile">
<b-menu-list label="Menu">
<b-menu-item icon="information-outline" label="Info"></b-menu-item>
<b-menu-item active expanded icon="settings" label="Administrator">
<b-menu-item icon="account" label="Users"></b-menu-item>
<b-menu-item icon="cellphone-link" label="Devices"></b-menu-item>
<b-menu-item icon="cash-multiple" label="Payments" disabled></b-menu-item>
</b-menu-item>
<b-menu-item icon="account" label="My Account">
<b-menu-item icon="account-box" label="Account data"></b-menu-item>
<b-menu-item icon="home-account" label="Addresses"></b-menu-item>
</b-menu-item>
</b-menu-list>
<b-menu-list>
<b-menu-item label="Expo" icon="link"></b-menu-item>
</b-menu-list>
<b-menu-list label="Actions">
<b-menu-item icon="logout" label="Logout"></b-menu-item>
</b-menu-list>
</b-menu>
</div>
</b-sidebar>
<div class="p-1">
<b-field>
<b-switch v-model="reduce">Reduced</b-switch>
</b-field>
<b-field>
<b-switch v-model="expandOnHover">Expand on hover</b-switch>
</b-field>
<b-field>
<b-switch v-model="expandWithDelay">Hover with delay</b-switch>
</b-field>
<b-field label="Mobile Layout">
<b-select v-model="mobile">
<option :value="null"></option>
<option value="reduce">Reduced</option>
<option value="hide">Hidden</option>
<option value="fullwidth">Fullwidth</option>
</b-select>
</b-field>
</div>
</section>
</div>
</template>
<script>
export default {
data() {
return {
expandOnHover: false,
expandWithDelay: false,
mobile: "reduce",
reduce: false
};
}
};
</script>
<style lang="scss">
.p-1 {
padding: 1em;
}
.sidebar-page {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100%;
// min-height: 100vh;
.sidebar-layout {
display: flex;
flex-direction: row;
min-height: 100%;
// min-height: 100vh;
}
}
@media screen and (max-width: 1023px) {
.b-sidebar {
.sidebar-content {
&.is-mini-mobile {
&:not(.is-mini-expand),
&.is-mini-expand:not(:hover):not(.is-mini-delayed) {
.menu-list {
li {
a {
span:nth-child(2) {
display: none;
}
}
ul {
padding-left: 0;
li {
a {
display: inline-block;
}
}
}
}
}
.menu-label:not(:last-child) {
margin-bottom: 0;
}
}
}
}
}
}
@media screen and (min-width: 1024px) {
.b-sidebar {
.sidebar-content {
&.is-mini {
&:not(.is-mini-expand),
&.is-mini-expand:not(:hover):not(.is-mini-delayed) {
.menu-list {
li {
a {
span:nth-child(2) {
display: none;
}
}
ul {
padding-left: 0;
li {
a {
display: inline-block;
}
}
}
}
}
.menu-label:not(:last-child) {
margin-bottom: 0;
}
}
}
}
}
}
.is-mini-expand {
.menu-list a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
</style>
# API
Sidebar
Name | Description | Type | Values | Default |
|---|---|---|---|---|
open | To control the behaviour of the sidebar programmatically, use the .sync modifier to make it two-way binding | Boolean | — | false |
position | Set display position of sidebar | String | fixed,static,absolute | fixed |
type | Type (color) of the background, optional | String, | is-white, is-black, is-light,
is-dark, is-primary, is-info, is-success,
is-warning, is-danger,
and any other colors you've set in the $colors list on Sass | — |
can-cancel | Can close Sidebar pressing escape or clicking outside | Boolean, Array | escape, outside | ['escape', 'outside'] |
on-cancel | Callback function to call after user canceled (clicked 'X' / pressed escape / clicked outside) | Function | — | — |
fullwidth | Show sidebar in fullwidth. A close button will be present for a fullwidth sidebar. | Boolean | - | false |
fullheight | Show sidebar in fullheight. | Boolean | - | false |
mobile | Custom layout on mobile | String | fullwidth,reduce,hide | — |
right | Show the sidebar on right | Boolean | false | |
overlay | Show an overlay when sidebar is open | Boolean | — | false |
expand-on-hover | Expand sidebar on hover when reduced or mobile is reduce | Boolean | — | false |
expand-on-hover-fixed | Expand sidebar on hover with fixed position when reduced or mobile is reduce | Boolean | — | false |
reduce | Show a small sidebar | Boolean | — | false |
scroll | clip to remove the <body> scrollbar, keep to have a non scrollable scrollbar
to avoid shifting background, but will set <body> to position fixed, might break some layouts | String | clip, keep | clip |
delay | Sidebar delay before it open (number in ms) | Number | — | 0 |
# Variables
You can use these variables to customize this component.
Name | Default |
|---|---|
$sidebar-background | $modal-background-background-color |
$sidebar-box-shadow | 5px 0px 13px 3px rgba($black, 0.1) |
$sidebar-width | 260px |
$sidebar-mobile-width | 80px |
$sidebar-mobile-breakpoint | $tablet |
$sidebar-colors | $navbar-colors |
This page is open source. Noticed a typo or something's unclear?