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.