Vue3 Sidebar is a panel component displayed as an overlay at the edges of the screen. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.
Setup
Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.
Import
import Sidebar from 'primevue/sidebar';
Getting Started
Sidebar is used as a container and visibility is controlled with the visible property that requires a v-model two-way binding.
<Sidebar v-model:visible="visibleLeft">
Content
</Sidebar>
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
Position
Sidebar can either be located on the left (default), right, top or bottom of the screen depending on the position property.
<Sidebar v-model:visible="visibleRight" position="right">
Content
</Sidebar>
Size
Sidebar size can be changed using a fixed value or using one of the three predefined ones.
<Sidebar v-model:visible="visibleLeft" class="p-sidebar-sm"></Sidebar>
<Sidebar v-model:visible="visibleLeft" class="p-sidebar-md"></Sidebar>
<Sidebar v-model:visible="visibleLeft" class="p-sidebar-lg"></Sidebar>
Full Screen
Full screen mode allows the sidebar to cover whole screen.
<Sidebar v-model:visible="visibleFull" position="full">
Content
</Sidebar>
Theming
Sidebar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeVue Sidebar showcase for demos and documentation.