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
check
Width #
Define custom width of sidebar in maximixed state.
check
Minimized width #
Width of va-sidebar when minimized.
check
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
check
check
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.
check
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.