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.
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 |
|---|---|---|---|
| active-color | The color for active |
|
|
| animated | Sets css |
|
|
| border-color | Color CSS style |
| - |
| color | Color of the component (theme string or |
|
|
| gradient | Adds a background gradient. |
|
|
| hover-color | The color for hovered |
| - |
| hover-opacity | Opacity value for |
|
|
| hoverable | Expand sidebar on hover. |
|
|
| minimized | Minimized state of sidebar. |
|
|
| minimized-width | Width of component in minimized state. |
|
|
| model-value | The value of the |
|
|
| position | Position of |
|
|
| preset | Named preset combination of component props. |
| - |
| text-color | Text color (theme string or HEX string). |
| - |
| width | Width of component in maximized state. |
|
|
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.