Become a patron
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
My Name
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. |