Sidebar #
va-sidebar
is a column to store navigation or secondary information of your app.
Examples #
Default #
Default usage of va-sidebar
Minimized #
You can minimize sidebar using minimized
prop
Width #
Define custom width of sidebar in maximixed state.
Minimized width #
Width of va-sidebar
when 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
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
.
API #
Props #
Name | Description | Types | Default |
---|---|---|---|
activeColor |
|
| |
animated |
|
| |
borderColor |
| - | |
color |
|
| |
gradient |
|
| |
hoverable |
|
| |
hoverColor |
| - | |
hoverOpacity |
|
| |
minimized |
|
| |
minimizedWidth |
|
| |
modelValue |
|
| |
position |
|
| |
preset |
| - | |
textColor |
| - | |
width |
|
|
Css Variables #
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 | 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
? #
minimized
conflicts with hoverable
?No conflict there, minimized
has higher priority. If it's true
, hover will not expand sidebar.