Sidebar

# Sidebar

# Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

Add a sidebar menu with the vs-sidebar component, there are two subcomponents vs-sidebar-item and vs-sidebar-group

Code copied

# Group

You can group items and hide them with the vs-sidebar-group sub-component.

The component has a slot: header in which we add a sub-component vs-sidebar-item with the property arrow and without the property id to not change the active state when clicking

Code copied

# Reduce

You can make the component 50px wide and only show the icons with the property reduce this property is dynamic

For the sidebar to work correctly it is necessary to add to the items the icon slot either with an icon or with for example the first letter of the text

Code copied

# Hover expand

You can add the functionality to expand and collapse the sidebar with the mouse, with the property hoverExpand

Code copied

# Color

Change the color of the sidebar, if necessary you can also change the color of the text to white with the textWhite property

Code copied

# Open

You can define if the sidebar is visible or hidden with the open property, this property by default is false

Code copied

# Position Right

Change the position of the sidebar to the right and its animation with the right property

Code copied

# API

props

Property Type Values Description default Example More
open Boolean truefalse Determines if the component is visible. false Usage Open Close 
:open.sync="activeSidebar"
v-model String id Determines the item that is in active status. Usage Open Close 
v-model="active"
absolute boolean truefalse Determine if the component is of absolute position. false Usage Open Close 
<vs-sidebar
  absolute
  v-model="active"
  :open.sync="activeSidebar"
  >
relative Boolean truefalse Determine if the component is relative position. false Usage Open Close 
<vs-sidebar
  relative
  v-model="active"
  :open.sync="activeSidebar"
  >
reduce Boolean truefalse Determine if the component is in a reduced state with a width of 50px. false Usage Open Close 
<vs-sidebar
  absolute
  reduce
  v-model="active"
  open
>
hover-expand Boolean truefalse Adds the functionality to expand when the user enters inside the sidebar and vice versa. false Usage Open Close 
<vs-sidebar
  absolute
  reduce
  hover-expand
  v-model="active"
  open
>
square Boolean truefalse Determine if the component has no border radius false Open Close 
<vs-sidebar
  square
  absolute
  v-model="active"
  open
>
notShadow Boolean truefalse Remove the shadow from the sidebar false Open Close 
<vs-sidebar
  not-shadow
  absolute
  v-model="active"
  open
>
background String Vuesax Colors RGB HEX Change the background color of the sidebar false Usage Open Close 
<vs-sidebar
  background="primary"
  absolute
  v-model="active"
  open
>
textWhite Boolean truefalse Change the text color to white false Usage Open Close 
<vs-sidebar
  text-white
  background="primary"
  absolute
  v-model="active"
  open
>
notLineActive Boolean truefalse Remove the active line from items false Open Close 
<vs-sidebar
  not-line-active
  absolute
  v-model="active"
  open
>
vs-sidebar-item:to String url Generate a new vue-router route Open Close 
<vs-sidebar-item
  to="/"
>
vs-sidebar-item:href String url Generate a new route Open Close 
<vs-sidebar-item
  href="http://vuesax.com/"
>
right Boolean truefalse Determines if the component is positioned to the right Open Close 
<vs-sidebar right>
  ...
</vs-sidebar>

slots

Property Type Values Description default Example More
footer slot Add the elements at the bottom of the sidebar. Usage Open Close 
<template #footer>
  ...
</template>
header slot Add the elements below the logo and above the items. Open Close 
<template #header>
  ...
</template>
vs-sidebar-item#icon slot It is the space to add the icon or a representative letter. Usage Open Close 
<template #icon>
  <i class='bx bx-home' ></i>
</template>
Last Updated: 9/20/2020, 2:36:51 PM

Card