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-router you can do them simply by adding the property to as if it were a vue-router 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 father 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 #

Name Type Parameters Description default
v-model Boolean Determines if the sidebar is active (visible), if it is a vs-sidebar-item, determine if the link is active. false
icon String Add the icon to the item or group label. none
icon-pack String Icon Pack Class Name Icon 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
parent Element (#idx | .classx) Determine the parent of the sidebar . body
staticPosition String Determines if the component is static and has a relative position. false
title (vs-sidebar-group) String Label of the group of links.
open (vs-sidebar-group) Boolean Determines if the group of links is open. false
openHover (vs-sidebar-group) Boolean Determine if the group expands when doing hover defaul click. click
position-right String Determines where the sidebar should be opened from right. left
reduce Boolean Determines if the sidebar is of only icons. false
hidden-background Boolean Determines if the background is hidden. false
reduce-not-hover-expand Boolean Determines if the component does not expand when in reduced mode. false
reduce-not-rebound Boolean Eliminates the bounce animation in the reduce mode when opening. false
click-not-close Boolean when clicking, the sidebar is no longer closed. false
default-index Number, String Determines the initial index of the options (the initial option selected). 1
index (vs-sidebar-item) Number, String determines the item's index. 1
href url add the href to the link.
to url add the href to the vue-router link.