Sidebar
#

va-sidebar is a column to store navigation or secondary information of your app.

Examples
#

Default
#

Default usage of va-sidebar

Open in GitHub

Minimized
#

You can minimize sidebar using minimized prop

Open in GitHub

Width
#

Define custom width of sidebar in maximixed state.

Open in GitHub

Minimized width
#

Width of va-sidebar when minimized.

Open in GitHub

Color
#

Change background color of a sidebar.

Open in GitHub

Gradient background
#

You can make Navbar background gradient

Open in GitHub

Position
#

Align va-sidebar to the left or right.

Content
Open in GitHub

Hoverable
#

Manage your sidebar state using hoverable prop. It allows to expand 'va-sidebar' on hover.

Open in GitHub

V-model
#

Use v-model to enable/disable va-sidebar.

Open in GitHub

API
#

Props #

NameDescriptionTypesDefault
activeColor

String

"primary"

animated

Boolean

true

borderColor

String

-

color

String

"background-element"

gradient

Boolean

false

hoverable

Boolean

false

hoverColor

String

-

hoverOpacity

Number

0.2

minimized

Boolean

false

minimizedWidth

String

"4rem"

modelValue

Boolean

true

position

String

"left"

preset

String

-

textColor

String

-

width

String

"16rem"

Css Variables #

NameDefault Value
--va-sidebar-min-height 100%
--va-sidebar-height 100%
--va-sidebar-position relative
--va-sidebar-top 0
--va-sidebar-left 0
--va-sidebar-transition var(--va-transition)
--va-sidebar-z-index 1
--va-sidebar-menu-max-height 100%
--va-sidebar-menu-margin-bottom 0
--va-sidebar-menu-list-style none
--va-sidebar-menu-padding-left 0
--va-sidebar-menu-overflow-y auto
--va-sidebar-menu-overflow-x hidden
--va-sidebar-item-active-border-size 4px
--va-sidebar-item-transition var(--va-transition)
--va-sidebar-item-content-padding 1rem
--va-sidebar-item-content-gap 0.5rem
--va-sidebar-item-title-white-space nowrap

FAQ
#

What if minimized conflicts with hoverable?
#

No conflict there, minimized has higher priority. If it's true, hover will not expand sidebar.