Theme ➜ Bulma
Sidebar
A sidebar to use as left/right overlay or static
Examples
Base
Show code
Inline
Example 1
Example 2
Example 3
Example 4
Example 5
Show code
Component Prop
Show code
Programmatically
Show code
Class props
| Class prop | Description | Props | Suffixes | |
|---|---|---|---|---|
| activeClass | Class of sidebar component when its active. | active | ||
| contentClass | Class of the sidebar content. | |||
| expandOnHoverClass | Class of the sidebar when expanded on hover. | expandOnHover | ||
| fullheightClass | Class of the sidebar when is fullheight. | fullheight | ||
| fullwidthClass | Class of the sidebar when is fullwidth. | fullwidth | ||
| hiddenClass | Class of the sidebar content when sidebar is hidden. | active | ||
| inlineClass | Class of the sidebar when its inlined. | |||
| mobileClass | Class of sidebar component when on mobile. 👉 Switch to mobile view to see it in action! | |||
| noScrollClass | Class of the body when sidebar is not clipped. | |||
| overlayClass | Class of the sidebar overlay. | |||
| positionClass | Class of the sidebar position. | position | ||
| reduceClass | Class of the sidebar when reduced. | reduce | ||
| rootClass | Class of the root element. | |||
| scrollClipClass | Class of the body when sidebar clipped. | |||
| teleportClass | Class of sidebar when teleported. | teleport | ||
| variantClass | Class of the sidebar variant. | variant | primary | |
| visibleClass | Class of the sidebar content when sidebar is visible. | active |
Sidebar component
A sidebar to use as left/right overlay or static
html
<o-sidebar></o-sidebar>Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| active | Whether siedbar is active or not, use v-model:active to make it two-way binding | boolean | - | false |
| animation | Custom animation (transition name) | string | - | From config: sidebar: { |
| cancelable | Is Sidebar cancleable by pressing escape or clicking outside. | boolean | string[] | escape, outside, true, false | From config: sidebar: { |
| component | Component to be injected, used to open a component sidebar programmatically. Close sidebar within the component by emitting a 'close' event — emits('close') | Component | - | |
| events | Events to be binded to the injected component | {} | - | |
| expandOnHover | Expand sidebar on hover when reduced or mobile is reduce | boolean | - | From config: sidebar: { |
| fullheight | Show sidebar in fullheight | boolean | - | From config: sidebar: { |
| fullwidth | Show sidebar in fullwidth | boolean | - | From config: sidebar: { |
| inline | Display the Sidebear inline | boolean | - | false |
| mobile | Custom layout on mobile | "expanded" | "reduced" | "hidden" | expanded, reduced, hidden | From config: sidebar: { |
| mobileBreakpoint | Mobile breakpoint as max-width value | string | - | From config: sidebar: { |
| overlay | Show an overlay like modal | boolean | - | From config: sidebar: { |
| override | Override existing theme classes completely | boolean | - | |
| position | Sidebar position | "left" | "right" | "top" | "bottom" | top, right, bottom, left | From config: sidebar: { |
| props | Props to be binded to the injected component | any | - | |
| reduce | Show a small sidebar | boolean | - | From config: sidebar: { |
| scroll | Use 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: { |
| teleport | Append 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 | object | - | From config: sidebar: { |
Events
| Event name | Properties | Description |
|---|---|---|
| update:active | value boolean - updated active prop | active prop two-way binding |
| close | value unknown - close event data | on component close event |
Slots
| Name | Description | Bindings |
|---|---|---|
| default | Sidebar default content, default is component prop | close (...args):void - function to close the component |
Sass variables
Current theme ➜ Oruga
| SASS Variable | Default |
|---|---|
| $sidebar-overlay | hsla(0, 0%, 4%, 0.86) |
| $sidebar-box-shadow | 5px 0px 13px 3px rgba(var(--#{$prefix}black), 0.1) |
| $sidebar-content-background-color | var(--#{$prefix}grey-lighter) |
| $sidebar-border-radius | var(--#{$prefix}base-border-radius) |
| $sidebar-border-width | 1px |
| $sidebar-border-color | rgba(0, 0, 0, 0.175) |
| $sidebar-reduced-width | 80px |
| $sidebar-width | 260px |
| $sidebar-zindex | 100 |
See ➜ 📄 Full scss file
Current theme ➜ Bulma
| SASS Variable | Default |
|---|---|
| $sidebar-colors | var.$colors |
| $sidebar-z | 40 |
| $sidebar-background-background-color | hsla( #{css.getVar("scheme-h")}, #{css.getVar("scheme-s")}, #{css.getVar("scheme-invert-l")}, 0.86) |
| $sidebar-shadow | css.getVar("shadow") |
| $sidebar-width | 260px |
| $sidebar-height | 260px |
| $sidebar-mobile-width | 80px |
See ➜ 📄 Full scss file
Current theme ➜ Bootstrap
| SASS Variable | Default |
|---|---|
| $sidebar-reduced-width | 5rem |
| $sidebar-reduced-height | 10vh |
See ➜ 📄 Full scss file