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
\r\n\r\nTo 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.\r\n
\r\n In case you need an external link or normal html, simply do it with the href property
To make the link is in an active state we have the property v-model
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
By default the parent of the sidebar is the body
\r\n\t\tYou can remove dark background(overlay) by setting hidden-background
prop to true
You can also use the sidebar in static mode with the property static
\r\n\r\n\t\twhen putting the sidebar in static mode its position becomes relative for better manipulation
\r\n\t\tYou can have groups of sub menus with the component vs-sidebar-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
By default the component is closed but if you need to initialize open you can use the property open
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!
\r\n\r\n\t\tstatic
sidebar will not appear on the right.\r\n\t\tYou 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
You can remove the bounce animation by opening the sidebar with the prop reduce-not-rebound