Skip to content

Sidebar

A sidebar to use as left/right overlay or static

Examples

Base

Show code

Inline

Show code

Programmatically

Show code

Class props

'Classes applied to the element'

A sidebar to use as left/right overlay or static

html
<o-sidebar></o-sidebar>

Props

Prop nameDescriptionTypeValuesDefault
activeWhether siedbar is active or not, use v-model:active to make it two-way bindingboolean-false
animationCustom animation (transition name)string-
From config:
sidebar: {
  animation: undefined
}
cancelableIs Sidebar cancleable by pressing escape or clicking outside.boolean | string[]escape, outside, true, false
From config:
sidebar: {
  cancelable: ["escape","outside"]
}
componentComponent to be injected, used to open a component sidebar programmatically.
Close sidebar within the component by emitting a 'close' event — emits('close')
any-
containerDOM element where the sidebar component will be created on (for programmatic usage).string | HTMLElement-
From config:
sidebar: {
  container: "body"
}
destroyOnHideDestroy sidebar on hideboolean-
From config:
sidebar: {
  destroyOnHide: false
}
eventsEvents to be binded to the injected component.Record<string, any>-{}
expandOnHoverExpand sidebar on hover when reduced or mobile is reduceboolean-
From config:
sidebar: {
  expandOnHover: false
}
fullheightShow sidebar in fullheightboolean-
From config:
sidebar: {
  fullheight: false
}
fullwidthShow sidebar in fullwidthboolean-
From config:
sidebar: {
  fullwidth: false
}
inlineDisplay the Sidebear inlineboolean-false
mobileCustom layout on mobile"fullwidth" | "reduced" | "hidden"fullwidth, reduced, hidden
From config:
sidebar: {
  mobile: undefined
}
mobileBreakpointMobile breakpoint as max-width valuestring-
From config:
sidebar: {
  mobileBreakpoint: undefined
}
onCloseCallback function to call on close (programmatically close or user canceled)() => void-Default function (see source code)
overlayShow an overlay like modalboolean-
From config:
sidebar: {
  overlay: false
}
overrideOverride existing theme classes completelyboolean-
positionSidebar position"top" | "bottom" | "left" | "right"top, right, bottom, left
From config:
sidebar: {
  position: "left"
}
propsProps to be binded to the injected component.Record<string, any>-
reduceShow a small sidebarboolean-
From config:
sidebar: {
  reduce: false
}
scrollUse 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.
"keep" | "clip"keep, clip
From config:
sidebar: {
  scroll: "clip"
}
teleportAppend the component to another part of the DOM.
Set true to append the component to the body.
In addition, any CSS selector string or an actual DOM node can be used.
string | boolean | Record<string, any>-
From config:
sidebar: {
  teleport: false
}

Events

Event namePropertiesDescription
update:activevalue boolean - updated active propactive prop two-way binding
closevalue any - close event dataon component close event

Slots

NameDescriptionBindings
defaultSidebar default content, default is component propclose (...args):void - function to close the component

Sass variables

Current theme ➜ Oruga

SASS VariableDefault
$sidebar-overlayhsla(0, 0%, 4%, 0.86)
$sidebar-box-shadow5px 0px 13px 3px rgba(var(--#{$prefix}black), 0.1)
$sidebar-content-background-colorvar(--#{$prefix}grey-lighter)
$sidebar-border-radiusvar(--#{$prefix}base-border-radius)
$sidebar-border-width1px
$sidebar-border-colorrgba(0, 0, 0, 0.175)
$sidebar-reduced-width80px
$sidebar-width260px
$sidebar-zindex100

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS VariableDefault
$sidebar-reduced-width5rem
$sidebar-reduced-height10vh

See ➜ 📄 Full scss file

Released under the MIT License.