Drawer is a container component displayed as an overlay.
import { DrawerModule } from 'primeng/drawer';
Drawer is used as a container and visibility is controlled with a binding to visible.
<p-drawer [(visible)]="visible" header="Drawer">
<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>
</p-drawer>
<p-button (click)="visible = true" icon="pi pi-arrow-right" />
Drawer location is configured with the position property that can take left, right, top and bottom as a value.
<p-drawer header="Left Drawer" [(visible)]="visible1" position="left">
<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>
</p-drawer>
<p-drawer header="Right Drawer" [(visible)]="visible2" 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>
</p-drawer>
<p-drawer header="Top Drawer" [(visible)]="visible3" 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>
</p-drawer>
<p-drawer header="Bottom Drawer" [(visible)]="visible4" 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>
</p-drawer>
<div class="flex gap-2 justify-center">
<p-button type="button" (click)="visible1 = true" icon="pi pi-arrow-right" />
<p-button type="button" (click)="visible2 = true" icon="pi pi-arrow-left" />
<p-button type="button" (click)="visible3 = true" icon="pi pi-arrow-down" />
<p-button type="button" (click)="visible4 = true" icon="pi pi-arrow-up" />
</div>
Drawer dimension can be defined with style or class properties, this responsive example utilizes Tailwind.
<p-drawer header="Drawer" [(visible)]="visible" styleClass="!w-full md:!w-80 lg:!w-[30rem]">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>
</p-drawer>
<p-button (click)="visible = true" icon="pi pi-arrow-right" />
Drawer can cover the whole page when fullScreen property is enabled.
<p-drawer header="Drawer" [(visible)]="visible" position="full">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>
</p-drawer>
<p-button (click)="visible = true" icon="pi pi-window-maximize" />
Drawer is customizable by header, content, footer templates.
<p-drawer [(visible)]="visible">
<ng-template #header>
<div class="flex items-center gap-2">
<p-avatar
image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"
shape="circle"
/>
<span class="font-bold">Amy Elsner</span>
</div>
</ng-template>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</p>
<ng-template #footer>
<div class="flex items-center gap-2">
<button pButton label="Account" icon="pi pi-user" class="w-full" outlined></button>
<button
pButton
label="Logout"
icon="pi pi-sign-out"
class="w-full"
severity="danger"
text
></button>
</div>
</ng-template>
</p-drawer>
<button pButton (click)="visible = true" icon="pi pi-plus"></button>
Headless mode allows you to customize the entire user interface instead of the default elements.
<p-drawer #drawerRef [(visible)]="visible">
<ng-template #headless>
<div class="flex flex-col h-full">
<div class="flex items-center justify-between px-6 pt-4 shrink-0">
<span class="inline-flex items-center gap-2">
<svg
width="31"
height="33"
viewBox="0 0 31 33"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="..."
fill="var(--p-primary-color)"
/>
</svg>
<span class="font-semibold text-2xl text-primary">Your Logo</span>
</span>
<span>
<p-button type="button" (click)="closeCallback($event)" icon="pi pi-times" rounded="true" outlined="true" styleClass="h-8 w-8"></p-button>
</span>
</div>
<div class="overflow-y-auto">
<ul class="list-none p-4 m-0">
<li>
<div
pRipple
pStyleClass="@next"
enterFromClass="hidden"
enterActiveClass="animate-slidedown"
leaveToClass="hidden"
leaveActiveClass="animate-slideup"
class="p-4 flex items-center justify-between text-surface-600 dark:text-surface-200 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 pRipple class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 duration-150 transition-colors p-ripple">
<i class="pi pi-home mr-2"></i>
<span class="font-medium">Dashboard</span>
</a>
</li>
<li>
<a pRipple class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 duration-150 transition-colors p-ripple">
<i class="pi pi-bookmark mr-2"></i>
<span class="font-medium">Bookmarks</span>
</a>
</li>
<li>
<a
pRipple
pStyleClass="@next"
enterFromClass="hidden"
enterActiveClass="animate-slidedown"
leaveToClass="hidden"
leaveActiveClass="animate-slideup"
class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 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-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
<li>
<a
pRipple
pStyleClass="@next"
enterFromClass="hidden"
enterActiveClass="animate-slidedown"
leaveToClass="hidden"
leaveActiveClass="animate-slideup"
class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 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-4 pr-0 m-0 hidden overflow-y-hidden transition-all duration-[400ms] ease-in-out">
<li>
<a pRipple class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 duration-150 transition-colors p-ripple">
<i class="pi pi-table mr-2"></i>
<span class="font-medium">View</span>
</a>
</li>
<li>
<a pRipple class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 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 pRipple class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 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 pRipple class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 duration-150 transition-colors p-ripple">
<i class="pi pi-users mr-2"></i>
<span class="font-medium">Team</span>
</a>
</li>
<li>
<a pRipple class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 duration-150 transition-colors p-ripple">
<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 text-primary-contrast rounded-full" style="min-width: 1.5rem; height: 1.5rem">3</span>
</a>
</li>
<li>
<a pRipple class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 duration-150 transition-colors p-ripple">
<i class="pi pi-calendar mr-2"></i>
<span class="font-medium">Calendar</span>
</a>
</li>
<li>
<a pRipple class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 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-4 m-0">
<li>
<div
pRipple
pStyleClass="@next"
enterFromClass="hidden"
enterActiveClass="animate-slidedown"
leaveToClass="hidden"
leaveActiveClass="animate-slideup"
class="p-4 flex items-center justify-between text-surface-600 dark:text-surface-200 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 pRipple class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 duration-150 transition-colors p-ripple">
<i class="pi pi-folder mr-2"></i>
<span class="font-medium">Projects</span>
</a>
</li>
<li>
<a pRipple class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 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 pRipple class="flex items-center cursor-pointer p-4 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 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-4 mx-4 border-t border-0 border-surface" />
<a pRipple class="m-4 flex items-center cursor-pointer p-4 gap-2 rounded-border text-surface-700 dark:text-surface-100 hover:bg-surface-100 dark:hover:bg-surface-700 duration-150 transition-colors p-ripple">
<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" shape="circle" />
<span class="font-bold">Amy Elsner</span>
</a>
</div>
</div>
</ng-template>
</p-drawer>
<p-button (click)="visible = true" icon="pi pi-bars" />
Drawer 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 drawer when opened.
It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding tabIndex would be necessary.
Trigger element also requires aria-expanded and aria-controls to be handled explicitly.
<p-button
icon="pi pi-arrow-right"
(click)="visible = true"
aria-controls="{{visible ? 'drawer' : null}}"
aria-expanded="{{visible ? true : false}}"
></p-button>
<p-drawer
[(visible)]="visible"
id="drawer"
(onHide)="visible = false"
role="region"
>
content
</p-drawer>
| Key | Function |
|---|---|
| tab | Moves focus to the next the focusable element within the drawer. |
| shift + tab | Moves focus to the previous the focusable element within the drawer. |
| escape | Closes the dialog if closeOnEscape is true. |
| Key | Function |
|---|---|
| enter | Closes the drawer. |
| space | Closes the drawer. |