Sidebar, also known as Drawer, is a container component displayed as an overlay.
import Sidebar from 'primevue/sidebar';
Sidebar is used as a container and visibility is controlled with a binding to visible.
<div class="card flex justify-content-center">
<Sidebar v-model:visible="visible">
<h2>Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar>
<Button icon="pi pi-arrow-right" @click="visible = true" />
</div>
Sidebar location is configured with the position property that can take left, right, top and bottom as a value.
<div class="flex gap-2 justify-content-center">
<Button icon="pi pi-arrow-right" @click="visibleLeft = true" />
<Button icon="pi pi-arrow-left" @click="visibleRight = true" />
<Button icon="pi pi-arrow-down" @click="visibleTop = true" />
<Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
</div>
<Sidebar v-model:visible="visibleLeft">
<h2>Left Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar>
<Sidebar v-model:visible="visibleRight" position="right">
<h2>Right Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar>
<Sidebar v-model:visible="visibleTop" position="top">
<h2>Top Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar>
<Sidebar v-model:visible="visibleBottom" position="bottom">
<h2>Bottom Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar>
Sidebar dimension can be defined with style or class properties which can also be responsive when used with a CSS utility library like PrimeFlex.
<div class="card flex justify-content-center">
<Sidebar v-model:visible="visible" class="w-full md:w-20rem lg:w-30rem">
<h2>Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar>
<Button icon="pi pi-arrow-right" @click="visible = true" />
</div>
Sidebar can cover the whole page when position property is equal to full.
<div class="card flex justify-content-center">
<Sidebar v-model:visible="visible" position="full">
<h2>Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</Sidebar>
<Button icon="pi pi-arrow-right" @click="visible = true" />
</div>
Additional content at the header section is provided using the header slot.
<div class="card flex justify-content-center">
<Sidebar v-model:visible="visible">
<h2>Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<template #header>
<div class="flex">
<button class="p-sidebar-icon p-link mr-2">
<span class="pi pi-print" />
</button>
<button class="p-sidebar-icon p-link mr-2">
<span class="pi pi-search" />
</button>
</div>
</template>
</Sidebar>
<Button icon="pi pi-plus" @click="visible = true" />
</div>
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-sidebar | Container element |
| p-sidebar-left | Container element of left sidebar. |
| p-sidebar-right | Container element of right sidebar. |
| p-sidebar-top | Container element of top sidebar. |
| p-sidebar-bottom | Container element of bottom sidebar. |
| p-sidebar-full | Container element of a full screen sidebar. |
| p-sidebar-visible | Container element when sidebar is visible. |
| p-sidebar-close | Close anchor element. |
| p-sidebar-sm | Small sized sidebar. |
| p-sidebar-md | Medium sized sidebar. |
| p-sidebar-lg | Large sized sidebar. |
| p-sidebar-mask | Modal layer of the sidebar. |
Sidebar component uses complementary role by default, since any attribute is passed to the root element aria role can be changed depending on your use case and additional attributes like aria-labelledby can be added. In addition aria-modal is added since focus is kept within the sidebar when opened.
Trigger element also requires aria-expanded and aria-controls to be handled explicitly.
<Button label="Show" icon="pi pi-external-link" @click="visible = true" :aria-controls="visible ? 'sbar' : null" :aria-expanded="visible"/>
<Sidebar id="sbar" v-model:visible="visible" role="region" >
<p>Content</p>
</Sidebar>
| Key | Function |
|---|---|
| tab | Moves focus to the next the focusable element within the sidebar. |
| shift + tab | Moves focus to the previous the focusable element within the sidebar. |
| escape | Closes the dialog. |
| Key | Function |
|---|---|
| enter | Closes the sidebar. |
| space | Closes the sidebar. |