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" 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-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" 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-content-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-content-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 align-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-column h-full">
<div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
<span class="inline-flex align-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="..." fill="var(--text-color)" />
</svg>
<span class="font-semibold text-2xl text-primary">Your Logo</span>
</span>
<span>
<Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-2rem w-2rem"></Button>
</span>
</div>
<div class="overflow-y-auto">
<ul class="list-none p-3 m-0">
<li>
<div
v-ripple
v-styleclass="{
selector: '@next',
enterClass: 'hidden',
enterActiveClass: 'slidedown',
leaveToClass: 'hidden',
leaveActiveClass: 'slideup'
}"
class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
>
<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 align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
<i class="pi pi-home mr-2"></i>
<span class="font-medium">Dashboard</span>
</a>
</li>
<li>
<a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
<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 align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
>
<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 transition-duration-400 transition-ease-in-out">
<li>
<a
v-ripple
v-styleclass="{
selector: '@next',
enterClass: 'hidden',
enterActiveClass: 'slidedown',
leaveToClass: 'hidden',
leaveActiveClass: 'slideup'
}"
class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
>
<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 transition-duration-400 transition-ease-in-out">
<li>
<a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
<i class="pi pi-table mr-2"></i>
<span class="font-medium">View</span>
</a>
</li>
<li>
<a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
<i class="pi pi-search mr-2"></i>
<span class="font-medium">Search</span>
</a>
</li>
</ul>
</li>
<li>
<a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
<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 align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
<i class="pi pi-users mr-2"></i>
<span class="font-medium">Team</span>
</a>
</li>
<li>
<a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
<i class="pi pi-comments mr-2"></i>
<span class="font-medium">Messages</span>
<span class="inline-flex align-items-center justify-content-center ml-auto bg-primary border-circle" style="min-width: 1.5rem; height: 1.5rem">3</span>
</a>
</li>
<li>
<a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
<i class="pi pi-calendar mr-2"></i>
<span class="font-medium">Calendar</span>
</a>
</li>
<li>
<a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
<i class="pi pi-cog mr-2"></i>
<span class="font-medium">Settings</span>
</a>
</li>
</ul>
</li>
</ul>
<ul class="list-none p-3 m-0">
<li>
<div
v-ripple
v-styleclass="{
selector: '@next',
enterClass: 'hidden',
enterActiveClass: 'slidedown',
leaveToClass: 'hidden',
leaveActiveClass: 'slideup'
}"
class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
>
<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 align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
<i class="pi pi-folder mr-2"></i>
<span class="font-medium">Projects</span>
</a>
</li>
<li>
<a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
<i class="pi pi-chart-bar mr-2"></i>
<span class="font-medium">Performance</span>
</a>
</li>
<li>
<a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
<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-top-1 border-none surface-border" />
<a v-ripple class="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
<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. |