Side Drawer

BsSideDrawer is a lightweight component's container which is used to house application navigation, logo and others.

Updated in v2.2.0

Overview

BsSideDrawer is usually used to house your application navigation. It works well with BsAppbar and can automatically adapt to the screen size. Background color can be modified using global CSS variables.

Location

BsSideDrawer support 2 position location: left and right. Use position property with value left or right to change the position location.

Added in v2.0.0

Mini Side Drawer

BsSideDrawer also support mini size. Sets the mini property to true to enable the mini Side Drawer. You can adjust the width of <bs-side-drawer> on minimize state using the mini-width property.

Usage Example

The following are a collection of examples that demonstrate more advanced use of the <bs-side-drawer>.

With Appbar

Clipped Side Drawer

CSS Variables

As CSS technology evolves, Vue MDBootstrap introduces global CSS variables for better customization.

Added in v2.2.0

:root {
  --sidedrawer-background: oklch(0.969 0.005 247.877);
  --sidedrawer-foreground: var(--foreground);

  /* navigation */
  --sidedrawer-item-foreground: var(--foreground);
  --sidedrawer-item-foreground-secondary: var(--foreground-subtle);
  --sidedrawer-item-foreground-subtle: var(--foreground-subtle-secondary);
  --sidedrawer-item-active-background: oklch(0.65 0.13 294.86 / 0.3);
  --sidedrawer-item-active-foreground: oklch(42.17% 0.12 293.75deg);
  --sidedrawer-item-active-foreground-secondary: oklch(42.17% 0.12 293.75deg / 0.75);
  --sidedrawer-item-hover-background: oklch(46.85% 0.12 293.75deg / 0.1);
  --sidedrawer-item-hover-foreground: var(--foreground);
  --sidedrawer-item-border-indicator: var(--md-field-active-indicator);
  --sidedrawer-item-divider-color: var(--border-translucent);
  --sidedrawer-item-expanded-background: oklch(0 0 0 / 0.03);
}

API Reference

Property	Type	Default	Description
color deprecated	String		Sets the component colors. Updated in v2.2.0 Use global CSS variables instead.
clipped	Boolean	false	Cut off the top edge of the component.
fixed-layout	Boolean	false	Sets the component position fixed on the left or right side even when scrolling the page. v2.0.0
mini	Boolean	false	The component minimize state.
mini-width	Number	56	The component width in pixel when on minimize state.
modal-width	Number	300	The component width in pixel when display as modal on small screen.
open v-model	Boolean	true	The component state, show or hide.
overlay-color	String	'#000'	The backdrop overlay color when the component is displayed as modal. The value must be in hexa-decimal color format. v2.0.0
position	String	'left'	The component position location. Valid values are: left, right. v2.0.0
shadow	Boolean	false	Add shadow effect to the component.
tag	String	'aside'	HTML tag used to render the component.
width	Number	250	The component width in pixel.

Name	Arguments	Description
resize	(target:HTMLElement)	Triggers when the component is resized. v2.0.0
update:open	(state:Boolean)	Triggers when the component becomes visible or invisible. Use this event to update the open property or just use the shortcut v-model:open.

Name	Description
default	The outlet slot used to place the main content.