Drawer component is a slide-out panel that overlays content, commonly used for navigation menus or additional content.
Experiment with all the properties of the Drawer component in real time.
Content for the drawer header/title.
Side from which the drawer slides in.
Width of the drawer (for left/right placement).
Style of the backdrop overlay.
If true, displays a close button in the header.
If true, clicking the overlay closes the drawer.
If true, pressing Escape closes the drawer.
import { Drawer, Button } from "lambda-ui-components";
import { useState } from "react";
export default function App() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button onClick={() => setIsOpen(true)} label="Open Drawer" />
<Drawer
isOpen={isOpen}
onClose={() => setIsOpen(false)}
title="Navigation"
placement="left"
>
<div className="p-4">
<p>Drawer content goes here</p>
</div>
</Drawer>
</>
);
}The placement prop controls which side of the screen the drawer slides in from. Options are left, right, top, and bottom.
Prop | Default | Type |
|---|---|---|
isOpen | false | boolean |
onClose | undefined | () => void |
children | undefined | ReactNode |
title | undefined | ReactNode |
footer | undefined | ReactNode |
placement | "left" | "left" | "right" | "top" | "bottom" |
width | "small" | "xsmall" | "small" | "medium" | "half" | "full" |
backdropType | "dark" | "dark" | "blur" | "transparent" |
size | undefined | string |
showCloseButton | true | boolean |
closeOnOverlayClick | true | boolean |
closeOnEscape | true | boolean |