SideBar

SideBar is important for a website, it helps users jump from one site section to another quickly

Default

One of the most common features is to have the hidden sidebar to show it when the user presses a button or makes an action, to add a sidebar we have the component vs-sidebar

Links

To add an internal link using vue-routeropen in new window you can do them simply by adding the property toopen in new window as if it were a vue-routeropen in new window link

In case you need an external link or normal html, simply do it with the href property

Active Link

To make the link is in an active state we have the property v-model

Parent

You can change the parent of the sidebar with the property parent that as a value requires an element of the DOM (#idx, .classx) or a reference of Vuejs as $refs.myrefContent

TIP

By default the parent of the sidebar is the body

Static

You can also use the sidebar in static mode with the property static

TIP

when putting the sidebar in static mode its position becomes relative for better manipulation

Group Collapsed

You can have groups of sub menus with the component vs-slider-group that as a required parameter we have the title, you can add as many groups as you need, including internally from the same component.

TIP

By default the component is closed but if you need to initialize open you can use the property open

Open on the right

You can also choose where you'd like the sidebar to appear, right or left? By default, a sidebar will be located on the left of the screen but sometimes, a right-screened sidebar is really useful!

WARNING

A static sidebar will not appear on the right.

Reduce and Expand

You can have a reduced sidebar with the reduce property which by default makes the sidebar look reduced and when hover expands, if you do not want the functionality to expand when hovering you can remove it with the reduce-not-hover-expand property

TIP

You can remove the bounce animation by opening the sidebar with the prop reduce-not-rebound

API #

NameTypeParametersDescriptiondefault
v-modelBooleanDetermines if the sidebar is active (visible), if it is a vs-sidebar-item, determine if the link is active.false
iconStringAdd the icon to the item or group label.none
icon-packStringIcon Pack Class NameIcon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.material-icons
parentElement (#idx | .classx)Determine the parent of the sidebar .body
staticPositionStringDetermines if the component is static and has a relative position.false
title (vs-sidebar-group)StringLabel of the group of links.
open (vs-sidebar-group)BooleanDetermines if the group of links is open.false
openHover (vs-sidebar-group)BooleanDetermine if the group expands when doing hover defaul click.click
position-rightStringDetermines where the sidebar should be opened from right.left
reduceBooleanDetermines if the sidebar is of only icons.false
hidden-backgroundBooleanDetermines if the background is hidden.false
reduce-not-hover-expandBooleanDetermines if the component does not expand when in reduced mode.false
reduce-not-reboundBooleanEliminates the bounce animation in the reduce mode when opening.false
click-not-closeBooleanwhen clicking, the sidebar is no longer closed.false
default-indexNumber, StringDetermines the initial index of the options (the initial option selected).1
index (vs-sidebar-item)Number, Stringdetermines the item's index.1
hrefurladd the href to the link.
tourladd the href to the vue-router link.