# Sidebar

A sidebar to use as left/right overlay or static

edit on github

# Examples

# Base

# Static

# Props

Prop name Description Type Values Default
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 -
variant Color of the sidebar, optional string|object primary, info, success, warning, danger, and any other custom color
overlay boolean -
position Skeleton position in relation to the window string fixed, absolute, static Config -> 'sidebar.position': 'fixed'
fullheight Show sidebar in fullheight boolean -
fullwidth Show sidebar in fullwidth boolean -
right Show the sidebar on right boolean -
mobile Custom layout on mobile string fullwidth, reduce, hidden
reduce Show a small sidebar boolean -
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 -
canCancel Sidebar cancel options array|boolean true, false, 'escape', 'outside' Config -> 'sidebar.canCancel': ['escape'
onCancel Callback on cancel func - () => {}
rootClass string -
backgroundClass string -
contentClass string -
fixedClass string -
staticClass string -
absoluteClass string -
fullheightClass string -
fullwidthClass string -
rightClass string -
reduceClass string -
expandOnHoverClass string -
expandOnHoverFixedClass string -
mobileReduceClass string -
mobileHideClass string -
mobileFullwidthClass string -
variantClass string -

# Events

Event name Type Description
update:open undefined

# Slots

Name Description Bindings

# Style

CSS Variable SASS Variable Default
--oruga-sidebar-background $sidebar-background 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-breakpoint $sidebar-mobile-breakpoint 1024px
--oruga-sidebar-mobile-width $sidebar-mobile-width 80px
--oruga-sidebar-width $sidebar-width 260px
--oruga-sidebar-zindex $sidebar-zindex 40