Vue Sidebar Component API

Sidebar API

Explore the API reference for the Vue Sidebar component and discover how to effectively utilize its props for customization.

On this page

jsx

import { CSidebar } from '@coreui/vue-pro'

Property	Default	Type
colorScheme	`undefined`	`string`
Sets if the color of text should be colored for a light or dark dark background.
narrow	-	`boolean`
Make sidebar narrow.
overlaid	-	`boolean`
Set sidebar to overlaid variant.
placement	`undefined`	`string`
Components placement, there’s no default placement.
position	-	`string`
Place sidebar in non-static positions.
size	-	`string`
Size the component small, large, or extra large.
unfoldable	-	`boolean`
Expand narrowed sidebar on hover.
visible	`undefined`	`boolean`
Toggle the visibility of sidebar component.

Event name
hide
Callback fired when the component requests to be hidden.
show
Callback fired when the component requests to be shown.
visible-change
Event emitted after visibility of component changed.

jsx

import { CSidebarNav } from '@coreui/vue-pro'

Property	Default	Type
as	`'ul'`	`string`, `Component`
Component used for the root node. Either a string to use a HTML element or a component.
compact5.9.0+	-	`boolean`
Make navigation more compact by cutting link padding in half.
variant5.9.0+	`undefined`	`'tree'`
Sets the navigation variant.