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
active-color

The color for active VaSidebarItem in the sidebar menu

String

"primary"

animated

Sets css transition to component

Boolean

true

border-color

Color CSS style border (theme supported options or HEX).

String

-

color

Color of the component (theme string or HEX string).

String

"background-element"

gradient

Adds a background gradient.

Boolean

false

hover-color

The color for hovered VaSidebarItem in the sidebar menu

String

-

hover-opacity

Opacity value for opacity behavior and mask opacity for mask behavior.

Number

0.2

hoverable

Expand sidebar on hover.

Boolean

false

minimized

Minimized state of sidebar.

Boolean

false

minimized-width

Width of component in minimized state.

String

"4rem"

model-value

The value of the v-model bindings.

Boolean

true

position

Position of va-sidebar, can be right or left.

String

"left"

preset

Named preset combination of component props.

String

-

text-color

Text color (theme string or HEX string).

String

-

width

Width of component in maximized state.

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.