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-center">
<Sidebar v-model:visible="visible" header="Sidebar">
<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 valid values.
<div class="flex gap-2 justify-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" header="Left Sidebar">
<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" header="Right Sidebar" position="right">
<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" header="Top Sidebar" position="top" style="height: auto">
<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" header="Bottom Sidebar" position="bottom" style="height: auto">
<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 or Tailwind.
<div class="card flex justify-center">
<Sidebar v-model:visible="visible" header="Sidebar" class="w-full md:w-[20rem] lg:w-[30rem]">
<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>
The whole page is covered when position property is set as full.
<div class="card flex justify-center">
<Sidebar v-model:visible="visible" header="Sidebar" position="full">
<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-window-maximize" @click="visible = true" />
</div>
Additional content at the header section is provided using the header template.
<Sidebar v-model:visible="visible">
<template #header>
<div class="flex items-center gap-2">
<Avatar image="/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span>
</div>
</template>
<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-plus" @click="visible = true" />
Headless mode is enabled by defining a container slot that lets you implement entire UI instead of the default elements.
<Sidebar v-model:visible="visible">
<template #container="{ closeCallback }">
<div class="flex flex-col h-full">
<div class="flex items-center justify-between px-4 pt-4 shrink-0">
<span class="inline-flex items-center gap-2">
<svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="var(--primary-color-color)" />
<path d="..." class="fill-surface-700 dark:fill-surface-200" />
</svg>
<span class="font-semibold text-2xl text-primary-500 dark:text-primary-400">Your Logo</span>
</span>
<span>
<Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined ></Button>
</span>
</div>
<div class="overflow-y-auto mt-4">
<ul class="list-none px-4 m-0">
<li>
<div
v-ripple
v-styleclass="{
selector: '@next',
enterClass: 'hidden',
enterActiveClass: 'slidedown',
leaveToClass: 'hidden',
leaveActiveClass: 'slideup'
}"
class="p-3 flex items-center justify-between text-surface-600 dark:text-surface-400 cursor-pointer rounded-md"
>
<span class="font-medium">FAVORITES</span>
<i class="pi pi-chevron-down"></i>
</div>
<ul class="list-none p-0 m-0 overflow-hidden">
<li>
<a v-ripple class="flex items-center cursor-pointer p-3 rounded-md text-surface-700 dark:text-surface-0/80 hover:bg-surface-100 dark:hover:bg-surface-700 duration-200 transition-colors">
<i class="pi pi-home mr-2"></i>
<span class="font-medium">Dashboard</span>
</a>
</li>
<li>
<a v-ripple class="flex items-center cursor-pointer p-3 rounded-md text-surface-700 dark:text-surface-0/80 hover:bg-surface-100 dark:hover:bg-surface-700 duration-200 transition-colors">
<i class="pi pi-bookmark mr-2"></i>
<span class="font-medium">Bookmarks</span>
</a>
</li>
<li>
<a
v-ripple
v-styleclass="{
selector: '@next',
enterClass: 'hidden',
enterActiveClass: 'slidedown',
leaveToClass: 'hidden',
leaveActiveClass: 'slideup'
}"
class="flex items-center cursor-pointer p-3 rounded-md text-surface-700 dark:text-surface-0/80 hover:bg-surface-100 dark:hover:bg-surface-700 duration-200 transition-colors"
>
<i class="pi pi-chart-line mr-2"></i>
<span class="font-medium">Reports</span>
<i class="pi pi-chevron-down ml-auto"></i>
</a>
<ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all duration-400 ease-in-out">
<li>
<a
v-ripple
v-styleclass="{
selector: '@next',
enterClass: 'hidden',
enterActiveClass: 'slidedown',
leaveToClass: 'hidden',
leaveActiveClass: 'slideup'
}"
class="flex items-center cursor-pointer p-3 rounded-md text-surface-700 dark:text-surface-0/80 hover:bg-surface-100 dark:hover:bg-surface-700 duration-200 transition-colors"
>
<i class="pi pi-chart-line mr-2"></i>
<span class="font-medium">Revenue</span>
<i class="pi pi-chevron-down ml-auto"></i>
</a>
<ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all duration-400 ease-in-out">
<li>
<a v-ripple class="flex items-center cursor-pointer p-3 rounded-md text-surface-700 dark:text-surface-0/80 hover:bg-surface-100 dark:hover:bg-surface-700 duration-200 transition-colors">
<i class="pi pi-table mr-2"></i>
<span class="font-medium">View</span>
</a>
</li>
<li>
<a v-ripple class="flex items-center cursor-pointer p-3 rounded-md text-surface-700 dark:text-surface-0/80 hover:bg-surface-100 dark:hover:bg-surface-700 duration-200 transition-colors">
<i class="pi pi-search mr-2"></i>
<span class="font-medium">Search</span>
</a>
</li>
</ul>
</li>
<li>
<a v-ripple class="flex items-center cursor-pointer p-3 rounded-md text-surface-700 dark:text-surface-0/80 hover:bg-surface-100 dark:hover:bg-surface-700 duration-200 transition-colors">
<i class="pi pi-chart-line mr-2"></i>
<span class="font-medium">Expenses</span>
</a>
</li>
</ul>
</li>
<li>
<a v-ripple class="flex items-center cursor-pointer p-3 rounded-md text-surface-700 dark:text-surface-0/80 hover:bg-surface-100 dark:hover:bg-surface-700 duration-200 transition-colors">
<i class="pi pi-users mr-2"></i>
<span class="font-medium">Team</span>
</a>
</li>
<li>
<a v-ripple class="flex items-center cursor-pointer p-3 rounded-md text-surface-700 dark:text-surface-0/80 hover:bg-surface-100 dark:hover:bg-surface-700 duration-200 transition-colors">
<i class="pi pi-comments mr-2"></i>
<span class="font-medium">Messages</span>
<span class="inline-flex items-center justify-center ml-auto bg-primary-500 dark:bg-primary-400 rounded-full w-6 h-6 text-surface-0 dark:text-surface-900">3</span>
</a>
</li>
<li>
<a v-ripple class="flex items-center cursor-pointer p-3 rounded-md text-surface-700 dark:text-surface-0/80 hover:bg-surface-100 dark:hover:bg-surface-700 duration-200 transition-colors">
<i class="pi pi-calendar mr-2"></i>
<span class="font-medium">Calendar</span>
</a>
</li>
<li>
<a v-ripple class="flex items-center cursor-pointer p-3 rounded-md text-surface-700 dark:text-surface-0/80 hover:bg-surface-100 dark:hover:bg-surface-700 duration-200 transition-colors">
<i class="pi pi-cog mr-2"></i>
<span class="font-medium">Settings</span>
</a>
</li>
</ul>
</li>
</ul>
<ul class="list-none px-4 m-0">
<li>
<div
v-ripple
v-styleclass="{
selector: '@next',
enterClass: 'hidden',
enterActiveClass: 'slidedown',
leaveToClass: 'hidden',
leaveActiveClass: 'slideup'
}"
class="p-3 flex items-center justify-between text-surface-600 dark:text-surface-400 cursor-pointer rounded-md"
>
<span class="font-medium">APPLICATION</span>
<i class="pi pi-chevron-down"></i>
</div>
<ul class="list-none p-0 m-0 overflow-hidden">
<li>
<a v-ripple class="flex items-center cursor-pointer p-3 rounded-md text-surface-700 dark:text-surface-0/80 hover:bg-surface-100 dark:hover:bg-surface-700 duration-200 transition-colors">
<i class="pi pi-folder mr-2"></i>
<span class="font-medium">Projects</span>
</a>
</li>
<li>
<a v-ripple class="flex items-center cursor-pointer p-3 rounded-md text-surface-700 dark:text-surface-0/80 hover:bg-surface-100 dark:hover:bg-surface-700 duration-200 transition-colors">
<i class="pi pi-chart-bar mr-2"></i>
<span class="font-medium">Performance</span>
</a>
</li>
<li>
<a v-ripple class="flex items-center cursor-pointer p-3 rounded-md text-surface-700 dark:text-surface-0/80 hover:bg-surface-100 dark:hover:bg-surface-700 duration-200 transition-colors">
<i class="pi pi-cog mr-2"></i>
<span class="font-medium">Settings</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="mt-auto">
<hr class="mb-3 mx-3 border-t-1 border-none border-surface-200 dark:border-surface-700" />
<a v-ripple class="m-3 flex items-center cursor-pointer p-3 gap-2 rounded-md text-surface-700 dark:text-surface-0/80 hover:bg-surface-100 dark:hover:bg-surface-700 duration-200 transition-colors">
<Avatar image="/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span>
</a>
</div>
</div>
</template>
</Sidebar>
<Button icon="pi pi-bars" @click="visible = true" />
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. |