Sidebar
#

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

Examples
#

Default
#

Default usage of va-sidebar

Sidebar items from config
#

Usually you want to store sidebar items in config and render them programmatically. In example below you can learn how to conditionally render sidebar items using VaAccordion, VaCollapse and VaSidebarItem components.

Minimized
#

You can minimize sidebar using minimized prop

Minimized

Width
#

Define custom width of sidebar in maximized state.

Minimized

Minimized width
#

Width of va-sidebar when minimized.

Minimized

Color
#

Change background color of a sidebar.

Gradient background
#

You can make Navbar background gradient

Position
#

Align va-sidebar to the left or right.

Content

Minimized

Show

Hoverable
#

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

V-model
#

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

Shown

API
#

Name	Description	Types	Default
activeColor	The color for active `VaSidebarItem` in the sidebar menu	`String`	`"primary"`
animated	Sets css `transition` to component	`Boolean \| String`	`true`
borderColor	Color CSS style `border` (theme supported options or `HEX`).	`String`	-
closeOnClickOutside	Dropdown will be closed when clicked outside dropdown content and anchor	`Boolean`	`false`
color	Color of the component (theme string or `HEX` string).	`String`	`"background-element"`
gradient	Adds a background gradient.	`Boolean`	`false`
hoverable	Expand sidebar on hover.	`Boolean`	`false`
hoverColor	The color for hovered `VaSidebarItem` in the sidebar menu	`String`	-
hoverOpacity	Opacity value for `opacity` behavior and mask opacity for `mask` behavior.	`Number \| String`	`0.2`
minimized	Minimized state of sidebar.	`Boolean`	`false`
minimizedWidth	Width of component in minimized state.	`String`	`"4rem"`
modelValue	The value of the `v-model` bindings.	`Boolean`	`true`
preset	Named preset combination of component props.	`String`	-
textColor	Text color (theme string or HEX string).	`String`	-
width	Width of component in maximized state.	`String`	`"16rem"`

Name	Description
update:modelValue	The event is triggered when the component needs to change the model. Is also used by `v-model` and must be listed after the `v-model`

Name	Default 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	visible
--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`?
#

What if minimized conflicts with hoverable?

Sidebar
#

Examples
#

Default
#

Sidebar items from config
#

Minimized
#

Width
#

Minimized width
#

Color
#

Gradient background
#

Position
#

Hoverable
#

V-model
#

API
#

Props #

Events #

Css Variables #

Change log #

FAQ
#

What if `minimized` conflicts with `hoverable`?
#

Sidebar #

Examples #

Default #

Sidebar items from config #

Minimized #

Width #

Minimized width #

Color #

Gradient background #

Position #

Hoverable #

V-model #

API #

Props #

Events #

Css Variables #

Change log #

FAQ #

What if minimized conflicts with hoverable? #

Sidebar
#

Examples
#

Default
#

Sidebar items from config
#

Minimized
#

Width
#

Minimized width
#

Color
#

Gradient background
#

Position
#

Hoverable
#

V-model
#

API
#

FAQ
#

What if `minimized` conflicts with `hoverable`?
#