Sidebar
A responsive sidebar component that can be used for navigation, menus, or any other content that needs to be displayed in a side panel. It supports both full-width and mini modes, and can be configured to appear on hover.
Please note, Sidebar must always be placed within a <div class="vui-sidebar-layout" /> element. Similar to Drawer
Props
| Name | Default | Type |
|---|---|---|
width | 224 | number Width of the sidebar in pixels when in full mode |
mini | false | boolean Whether to display the sidebar in mini mode (collapsed) |
appear | false | boolean Whether the sidebar should appear on hover at the left edge of the screen |
floaty | false | boolean Whether to add edges of background around the sidebar |
Events
Sidebar is controlled via v-model, because it can also close itself and this change should be propagated to the parent.
| Name | Payload | Description |
|---|---|---|
update:modelValue | — | Emitted when the sidebar's open state changes |
Slots
All slots expose the same properties, which allow the UI to control the state of the Sidebar.
| Name | Accepts | Description |
|---|---|---|
default | SidebarExpose | Main content of the sidebar |
header | SidebarExpose | Content to display at the top of the sidebar |
footer | SidebarExpose | Content to display at the bottom of the sidebar |
interface SidebarExpose {
mini: Ref<boolean>
floaty: Ref<boolean>
width: Ref<number>
open: Ref<boolean>
close: () => void
}