preview
Usage#
import { Drawer } from '@primereact/ui/drawer';<Drawer.Root>
<Drawer.Trigger />
<Drawer.Portal>
<Drawer.Backdrop />
<Drawer.Popup>
<Drawer.Header>
<Drawer.Title />
<Drawer.Close />
</Drawer.Header>
<Drawer.Content />
<Drawer.Footer />
</Drawer.Popup>
</Drawer.Portal>
</Drawer.Root>Examples#
Basic#
A slide-in panel from the edge of the screen for contextual content.
basic-demo
import { Bars } from '@primeicons/react/bars';
import { Times } from '@primeicons/react/times';
import { Button } from '@primereact/ui/button';
import { Drawer } from '@primereact/ui/drawer';
export default function BasicDemo() {
return (
<div className="flex justify-center">
<Drawer.Root>
<Drawer.Trigger as={Button} iconOnly>
<Bars />
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Backdrop />
<Drawer.Popup className="w-full md:w-80">
<Drawer.Header>
<Drawer.Title>Basic Drawer</Drawer.Title>
<Drawer.Close as={Button} rounded variant="text" iconOnly>
<Times />
</Drawer.Close>
</Drawer.Header>
<Drawer.Content>
<p>A slide-in panel from the edge of the screen for contextual content.</p>
</Drawer.Content>
</Drawer.Popup>
</Drawer.Portal>
</Drawer.Root>
</div>
);
}
Position#
The position of the drawer can be customized with the position property. The available values are left, right, top and bottom.
position-demo
'use client';
import { ArrowDown } from '@primeicons/react/arrow-down';
import { ArrowLeft } from '@primeicons/react/arrow-left';
import { ArrowRight } from '@primeicons/react/arrow-right';
import { ArrowUp } from '@primeicons/react/arrow-up';
import { Times } from '@primeicons/react/times';
import { Button } from '@primereact/ui/button';
import { Drawer } from '@primereact/ui/drawer';
import { DrawerRootChangeEvent } from 'primereact/drawer';
import * as React from 'react';
export default function PositionDemo() {
const [visibleLeft, setVisibleLeft] = React.useState<boolean>(false);
const [visibleRight, setVisibleRight] = React.useState<boolean>(false);
const [visibleTop, setVisibleTop] = React.useState<boolean>(false);
const [visibleBottom, setVisibleBottom] = React.useState<boolean>(false);
return (
<div>
<div className="flex gap-2 justify-center">
<Button iconOnly onClick={() => setVisibleLeft(true)}>
<ArrowRight />
</Button>
<Button iconOnly onClick={() => setVisibleRight(true)}>
<ArrowLeft />
</Button>
<Button iconOnly onClick={() => setVisibleTop(true)}>
<ArrowDown />
</Button>
<Button iconOnly onClick={() => setVisibleBottom(true)}>
<ArrowUp />
</Button>
</div>
<Drawer.Root open={visibleLeft} onOpenChange={(e: DrawerRootChangeEvent) => setVisibleLeft(e.value as boolean)}>
<Drawer.Portal>
<Drawer.Backdrop />
<Drawer.Popup className="w-full md:w-80">
<Drawer.Header>
<Drawer.Title>Left Drawer</Drawer.Title>
<Drawer.Close as={Button} rounded variant="text" iconOnly>
<Times />
</Drawer.Close>
</Drawer.Header>
<Drawer.Content>
<p>
The position of the drawer can be customized with the position property. The available values are left, right, top and
bottom.
</p>
</Drawer.Content>
</Drawer.Popup>
</Drawer.Portal>
</Drawer.Root>
<Drawer.Root position="right" open={visibleRight} onOpenChange={(e: DrawerRootChangeEvent) => setVisibleRight(e.value as boolean)}>
<Drawer.Portal>
<Drawer.Backdrop />
<Drawer.Popup className="w-full md:w-80">
<Drawer.Header>
<Drawer.Title>Right Drawer</Drawer.Title>
<Drawer.Close as={Button} rounded variant="text" iconOnly>
<Times />
</Drawer.Close>
</Drawer.Header>
<Drawer.Content>
<p>
The position of the drawer can be customized with the position property. The available values are left, right, top and
bottom.
</p>
</Drawer.Content>
</Drawer.Popup>
</Drawer.Portal>
</Drawer.Root>
<Drawer.Root
position="top"
open={visibleTop}
onOpenChange={(e: DrawerRootChangeEvent) => setVisibleTop(e.value as boolean)}
style={{ height: 'auto' }}
>
<Drawer.Portal>
<Drawer.Backdrop />
<Drawer.Popup>
<Drawer.Header>
<Drawer.Title>Top Drawer</Drawer.Title>
<Drawer.Close as={Button} rounded variant="text" iconOnly>
<Times />
</Drawer.Close>
</Drawer.Header>
<Drawer.Content>
<p>
The position of the drawer can be customized with the position property. The available values are left, right, top and
bottom.
</p>
</Drawer.Content>
</Drawer.Popup>
</Drawer.Portal>
</Drawer.Root>
<Drawer.Root
position="bottom"
open={visibleBottom}
onOpenChange={(e: DrawerRootChangeEvent) => setVisibleBottom(e.value as boolean)}
style={{ height: 'auto' }}
>
<Drawer.Portal>
<Drawer.Backdrop />
<Drawer.Popup>
<Drawer.Header>
<Drawer.Title>Bottom Drawer</Drawer.Title>
<Drawer.Close as={Button} rounded variant="text" iconOnly>
<Times />
</Drawer.Close>
</Drawer.Header>
<Drawer.Content>
<p>
The position of the drawer can be customized with the position property. The available values are left, right, top and
bottom.
</p>
</Drawer.Content>
</Drawer.Popup>
</Drawer.Portal>
</Drawer.Root>
</div>
);
}
Full Screen#
The full screen mode is enabled when position property is set as full.
full-screen-demo
'use client';
import { Times } from '@primeicons/react/times';
import { WindowMaximize } from '@primeicons/react/window-maximize';
import { Button } from '@primereact/ui/button';
import { Drawer } from '@primereact/ui/drawer';
export default function FullScreenDemo() {
return (
<div className="flex justify-center">
<Drawer.Root position="full">
<Drawer.Trigger as={Button} iconOnly>
<WindowMaximize />
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Backdrop />
<Drawer.Popup>
<Drawer.Header>
<Drawer.Title>Full Screen Drawer</Drawer.Title>
<Drawer.Close as={Button} rounded variant="text" iconOnly>
<Times />
</Drawer.Close>
</Drawer.Header>
<Drawer.Content>
<p>The full screen mode is enabled when position property is set as full.</p>
</Drawer.Content>
</Drawer.Popup>
</Drawer.Portal>
</Drawer.Root>
</div>
);
}
Responsive#
The responsive mode can be enabled by adding className or style to the Drawer.Popup component.
responsive-demo
'use client';
import { Check } from '@primeicons/react/check';
import { Times } from '@primeicons/react/times';
import { Button } from '@primereact/ui/button';
import { Checkbox } from '@primereact/ui/checkbox';
import { Drawer } from '@primereact/ui/drawer';
import { InputText } from '@primereact/ui/inputtext';
import { Label } from '@primereact/ui/label';
import { InputPassword } from '@primereact/ui/inputpassword';
export default function ResponsiveDemo() {
return (
<div className="flex justify-center">
<Drawer.Root>
<Drawer.Trigger as={Button}>Log in</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Backdrop />
<Drawer.Popup className="w-full sm:w-96 md:w-md lg:w-120">
<Drawer.Header>
<Drawer.Title>Responsive Drawer</Drawer.Title>
<Drawer.Close as={Button} rounded variant="text" iconOnly>
<Times />
</Drawer.Close>
</Drawer.Header>
<Drawer.Content>
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-2">
<Label htmlFor="email" className="font-medium text-sm">
Email
</Label>
<InputText id="email" placeholder="Enter your email" className="w-full" />
</div>
<div className="flex flex-col gap-2">
<Label htmlFor="password" className="font-medium text-sm">
Password
</Label>
<InputPassword id="password" placeholder="Enter your password" className="w-full" />
</div>
<div className="flex items-center gap-2">
<Checkbox.Root inputId="remember" value="remember">
<Checkbox.Box>
<Checkbox.Indicator className="data-unchecked:hidden!" as={Check} />
</Checkbox.Box>
</Checkbox.Root>
<Label htmlFor="remember" className="text-sm">
Remember me
</Label>
</div>
<Button className="w-full">Sign In</Button>
</div>
</Drawer.Content>
</Drawer.Popup>
</Drawer.Portal>
</Drawer.Root>
</div>
);
}
API#
Sub-Components#
See Primitive API for DrawerRoot, DrawerTrigger, DrawerPortal, DrawerBackdrop, DrawerPopup, DrawerHeader, DrawerTitle, DrawerClose, DrawerContent, DrawerFooter component documentation.
Hooks#
See Headless API for useDrawer hook documentation.
Accessibility#
See Drawer Primitive for WAI-ARIA compliance details and keyboard support.