# Sidebar

A sidebar to use as left/right overlay or static


edit on github

# Examples

# Base

# Static

# Class props

📄 Full scss file


How does Class props inspector work?
Class prop Description Props Suffixes
absoluteClass Class of the sidebar when its position is absolute.
👉 Scroll to the top of this page to see the sidebar
position
contentClass Class of the sidebar content.
expandOnHoverClass Class of the sidebar when expanded on hover. expandOnHover
expandOnHoverFixedClass Class of the sidebar when expanded on hover and its position is fixed. expandOnHover
expandOnHoverFixed
fixedClass Class of the sidebar when its position is fixed. position
fullheightClass Class of the sidebar when is fullheight. fullheight
fullwidthClass Class of the sidebar when is fullwidth. fullwidth
mobileClass Class of sidebar component when on mobile.
👉 Switch to mobile view to see it in action!
overlayClass Class of the sidebar overlay.
reduceClass Class of the sidebar when reduced. reduce
rightClass Class of the sidebar when is positioned on the right. right
rootClass Class of the root element.
staticClass Class of the sidebar when its position is static. position
variantClass Class of the sidebar variant. variant primary
info
warning
danger


# Props

Prop name Description Type Values Default
canCancel Sidebar cancel options array|boolean true, false, 'escape', 'outside'
From config

sidebar: {
  canCancel: ['escape', 'outside']
}
expandOnHover Expand sidebar on hover when reduced or mobile is reduce boolean -
expandOnHoverFixed Expand sidebar on hover with fixed position when reduced or mobile is reduce boolean -
fullheight Show sidebar in fullheight boolean -
fullwidth Show sidebar in fullwidth boolean -
mobile Custom layout on mobile string fullwidth, reduced, hidden
mobileBreakpoint Mobile breakpoint as max-width value string -
onCancel Callback on cancel func - Default function (see source code)
open To control the behaviour of the sidebar programmatically, use the .sync modifier (Vue 2.x) or v-model:open (Vue 3.x) to make it two-way binding boolean -
overlay Show an overlay like modal boolean -
override Override classes boolean - false
position Skeleton position in relation to the window string fixed, absolute, static
From config

sidebar: {
  position: 'fixed'
}
reduce Show a small sidebar boolean -
right Show the sidebar on right boolean -
scroll string -
From config

sidebar: {
  scroll: 'clip'
}
variant Color of the sidebar, optional string|object primary, info, success, warning, danger, and any other custom color

# Events

Event name Properties Description
close
update:open

# Slots

Name Description Bindings
default

# Style

CSS Variable SASS Variable Default
--oruga-sidebar-overlay $sidebar-overlay hsla(0,0%,4%,.86)
--oruga-sidebar-box-shadow $sidebar-box-shadow 5px 0px 13px 3px rgba($black, 0.1)
--oruga-sidebar-content-background-color $sidebar-content-background-color $grey-lighter
--oruga-sidebar-mobile-width $sidebar-mobile-width 80px
--oruga-sidebar-width $sidebar-width 260px
--oruga-sidebar-zindex $sidebar-zindex 38