Use our Tailwind CSS drawer for side menus in your website.
See below our simple Drawer example that you can use in your Tailwind CSS and React project.
Material Tailwind features multiple React and HTML components, all written with Tailwind CSS classes and Material Design guidelines.
import React from "react";
import {
Drawer,
Button,
Typography,
IconButton,
} from "@material-tailwind/react";
import { XMarkIcon } from "@heroicons/react/24/outline";
export default function Example() {
const [open, setOpen] = React.useState(false);
const openDrawer = () => setOpen(true);
const closeDrawer = () => setOpen(false);
return (
<React.Fragment>
<Button onClick={openDrawer}>Open Drawer</Button>
<Drawer open={open} onClose={closeDrawer} className="p-4">
<div className="mb-6 flex items-center justify-between">
<Typography variant="h5" color="blue-gray">
Material Tailwind
</Typography>
<IconButton variant="text" color="blue-gray" onClick={closeDrawer}>
<XMarkIcon strokeWidth={2} className="h-5 w-5" />
</IconButton>
</div>
<Typography color="gray" className="mb-8 pr-4 font-normal">
Material Tailwind features multiple React and HTML components, all
written with Tailwind CSS classes and Material Design guidelines.
</Typography>
<div className="flex gap-2">
<Button size="sm">Get Started</Button>
<Button size="sm" variant="outlined">
Documentation
</Button>
</div>
</Drawer>
</React.Fragment>
);
}You can change the position of the Drawer component using the placement prop.
import React from "react";
import {
Drawer,
Button,
Typography,
IconButton,
} from "@material-tailwind/react";
import { XMarkIcon } from "@heroicons/react/24/outline";
export function Example() {
const [openTop, setOpenTop] = React.useState(false);
const [openRight, setOpenRight] = React.useState(false);
const [openBottom, setOpenBottom] = React.useState(false);
const [openLeft, setOpenLeft] = React.useState(false);
const openDrawerTop = () => setOpenTop(true);
const closeDrawerTop = () => setOpenTop(false);
const openDrawerRight = () => setOpenRight(true);
const closeDrawerRight = () => setOpenRight(false);
const openDrawerBottom = () => setOpenBottom(true);
const closeDrawerBottom = () => setOpenBottom(false);
const openDrawerLeft = () => setOpenLeft(true);
const closeDrawerLeft = () => setOpenLeft(false);
return (
<React.Fragment>
<div className="flex flex-wrap gap-4">
<Button onClick={openDrawerTop}>Open Drawer Top</Button>
<Button onClick={openDrawerRight}>Open Drawer Right</Button>
<Button onClick={openDrawerBottom}>Open Drawer Bottom</Button>
<Button onClick={openDrawerLeft}>Open Drawer Left</Button>
</div>
<Drawer
placement="top"
open={openTop}
onClose={closeDrawerTop}
className="p-4"
>
<div className="mb-6 flex items-center justify-between">
<Typography variant="h5" color="blue-gray">
Drawer on Top
</Typography>
<IconButton variant="text" color="blue-gray" onClick={closeDrawerTop}>
<XMarkIcon strokeWidth={2} className="h-5 w-5" />
</IconButton>
</div>
</Drawer>
<Drawer
placement="right"
open={openRight}
onClose={closeDrawerRight}
className="p-4"
>
<div className="mb-6 flex items-center justify-between">
<Typography variant="h5" color="blue-gray">
Drawer on Right
</Typography>
<IconButton
variant="text"
color="blue-gray"
onClick={closeDrawerRight}
>
<XMarkIcon strokeWidth={2} className="h-5 w-5" />
</IconButton>
</div>
</Drawer>
<Drawer
placement="bottom"
open={openBottom}
onClose={closeDrawerBottom}
className="p-4"
>
<div className="mb-6 flex items-center justify-between">
<Typography variant="h5" color="blue-gray">
Drawer on Bottom
</Typography>
<IconButton
variant="text"
color="blue-gray"
onClick={closeDrawerBottom}
>
<XMarkIcon strokeWidth={2} className="h-5 w-5" />
</IconButton>
</div>
</Drawer>
<Drawer
placement="left"
open={openLeft}
onClose={closeDrawerLeft}
className="p-4"
>
<div className="mb-6 flex items-center justify-between">
<Typography variant="h5" color="blue-gray">
Drawer on LefopenLeft
</Typography>
<IconButton
variant="text"
color="blue-gray"
onClick={closeDrawerLeft}
>
<XMarkIcon strokeWidth={2} className="h-5 w-5" />
</IconButton>
</div>
</Drawer>
</React.Fragment>
);
}Use this beautiful and versatile example to display navigation options in a hidden panel that can be accessed by clicking a button. These components are usually used in various apps and systems.
import React from "react";
import {
Drawer,
Button,
Typography,
IconButton,
List,
ListItem,
ListItemPrefix,
ListItemSuffix,
Chip,
} from "@material-tailwind/react";
import { XMarkIcon } from "@heroicons/react/24/outline";
import {
PresentationChartBarIcon,
ShoppingBagIcon,
UserCircleIcon,
Cog6ToothIcon,
InboxIcon,
PowerIcon,
} from "@heroicons/react/24/solid";
export function Example() {
const [open, setOpen] = React.useState(false);
const openDrawer = () => setOpen(true);
const closeDrawer = () => setOpen(false);
return (
<React.Fragment>
<Button onClick={openDrawer}>Open Drawer</Button>
<Drawer open={open} onClose={closeDrawer}>
<div className="mb-2 flex items-center justify-between p-4">
<Typography variant="h5" color="blue-gray">
Side Menu
</Typography>
<IconButton variant="text" color="blue-gray" onClick={closeDrawer}>
<XMarkIcon strokeWidth={2} className="h-5 w-5" />
</IconButton>
</div>
<List>
<ListItem>
<ListItemPrefix>
<PresentationChartBarIcon className="h-5 w-5" />
</ListItemPrefix>
Dashboard
</ListItem>
<ListItem>
<ListItemPrefix>
<ShoppingBagIcon className="h-5 w-5" />
</ListItemPrefix>
E-Commerce
</ListItem>
<ListItem>
<ListItemPrefix>
<InboxIcon className="h-5 w-5" />
</ListItemPrefix>
Inbox
<ListItemSuffix>
<Chip
value="14"
size="sm"
variant="ghost"
color="blue-gray"
className="rounded-full"
/>
</ListItemSuffix>
</ListItem>
<ListItem>
<ListItemPrefix>
<UserCircleIcon className="h-5 w-5" />
</ListItemPrefix>
Profile
</ListItem>
<ListItem>
<ListItemPrefix>
<Cog6ToothIcon className="h-5 w-5" />
</ListItemPrefix>
Settings
</ListItem>
<ListItem>
<ListItemPrefix>
<PowerIcon className="h-5 w-5" />
</ListItemPrefix>
Log Out
</ListItem>
</List>
</Drawer>
</React.Fragment>
);
}Similar to the previous example, this drawer will display a form instead of displaying navigation options.
import React from "react";
import {
Drawer,
Button,
Typography,
IconButton,
Input,
Textarea,
} from "@material-tailwind/react";
import { XMarkIcon } from "@heroicons/react/24/outline";
export function Example() {
const [open, setOpen] = React.useState(false);
const openDrawer = () => setOpen(true);
const closeDrawer = () => setOpen(false);
return (
<React.Fragment>
<Button onClick={openDrawer}>Open Drawer</Button>
<Drawer open={open} onClose={closeDrawer}>
<div className="mb-2 flex items-center justify-between p-4">
<Typography variant="h5" color="blue-gray">
Contact Us
</Typography>
<IconButton variant="text" color="blue-gray" onClick={closeDrawer}>
<XMarkIcon strokeWidth={2} className="h-5 w-5" />
</IconButton>
</div>
<form className="flex flex-col gap-6 p-4">
<Input type="email" label="Email" />
<Input label="Subject" />
<Textarea rows={6} label="Message" />
<Button>Send Message</Button>
</form>
</Drawer>
</React.Fragment>
);
}