- Getting Started
- Upgrade Guide
- Integration Guide
- Customization
- Components
- Core Elements
- Data Display
- Plugins
Tailwind CSS Drawer - React
Use our React and Tailwind CSS drawer for side menus in your website. Drawer is a side menu that can be opened and closed by the user. It is a great way to display additional information or navigation options without taking up too much space on the screen.
See below our Drawer component examples that you can use in your Tailwind CSS and React project.
#Drawer Demo
Here's how to implement a simple and responsive Drawer component. It can be used to display additional information or navigation options when the user clicks on a button.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
"use client";
import {
Drawer,
Button,
Typography,
IconButton,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DrawerDemo() {
return (
<Drawer>
<Drawer.Trigger as={Button}>Open Drawer</Drawer.Trigger>
<Drawer.Overlay>
<Drawer.Panel>
<div className="flex items-center justify-between gap-4">
<Typography type="h6">Material Tailwind</Typography>
<Drawer.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
className="absolute right-2 top-2"
isCircular
>
<Xmark className="h-5 w-5" />
</Drawer.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind features multiple React and HTML components, all
written with Tailwind CSS classes and Material Design guidelines.
</Typography>
<div className="mb-1 flex items-center gap-2">
<Button>Get Started</Button>
<Button color="secondary">Documentation</Button>
</div>
</Drawer.Panel>
</Drawer.Overlay>
</Drawer>
);
}
"use client";
import {
Drawer,
Button,
Typography,
IconButton,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DrawerDemo() {
return (
<Drawer>
<Drawer.Trigger as={Button}>Open Drawer</Drawer.Trigger>
<Drawer.Overlay>
<Drawer.Panel>
<div className="flex items-center justify-between gap-4">
<Typography type="h6">Material Tailwind</Typography>
<Drawer.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
className="absolute right-2 top-2"
isCircular
>
<Xmark className="h-5 w-5" />
</Drawer.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind features multiple React and HTML components, all
written with Tailwind CSS classes and Material Design guidelines.
</Typography>
<div className="mb-1 flex items-center gap-2">
<Button>Get Started</Button>
<Button color="secondary">Documentation</Button>
</div>
</Drawer.Panel>
</Drawer.Overlay>
</Drawer>
);
}
#Drawer Placement
You can place the Drawer component in different positions on the screen. You can choose from top, right, bottom, or left. This way, you can customize the Drawer component to fit your website's design.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
"use client";
import {
Drawer,
Button,
Typography,
IconButton,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DrawerPlacement() {
return (
<div className="flex gap-4">
<Drawer>
<Drawer.Trigger as={Button}>Open Drawer Top</Drawer.Trigger>
<Drawer.Overlay>
<Drawer.Panel placement="top">
<div className="flex items-center justify-between gap-4">
<Typography type="h6">Material Tailwind</Typography>
<Drawer.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
className="absolute right-2 top-2"
isCircular
>
<Xmark className="h-5 w-5" />
</Drawer.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind features multiple React and HTML components, all
written with Tailwind CSS classes and Material Design guidelines.
</Typography>
<div className="mb-1 flex items-center gap-2">
<Button>Get Started</Button>
<Button color="secondary">Documentation</Button>
</div>
</Drawer.Panel>
</Drawer.Overlay>
</Drawer>
<Drawer>
<Drawer.Trigger as={Button}>Open Drawer Right</Drawer.Trigger>
<Drawer.Overlay>
<Drawer.Panel placement="right">
<div className="flex items-center justify-between gap-4">
<Typography type="h6">Material Tailwind</Typography>
<Drawer.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
className="absolute right-2 top-2"
isCircular
color="secondary"
>
<Xmark className="h-5 w-5" />
</Drawer.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind features multiple React and HTML components, all
written with Tailwind CSS classes and Material Design guidelines.
</Typography>
<div className="mb-1 flex items-center gap-2">
<Button>Get Started</Button>
<Button color="secondary">Documentation</Button>
</div>
</Drawer.Panel>
</Drawer.Overlay>
</Drawer>
<Drawer>
<Drawer.Trigger as={Button}>Open Drawer Bottom</Drawer.Trigger>
<Drawer.Overlay>
<Drawer.Panel placement="bottom">
<div className="flex items-center justify-between gap-4">
<Typography type="h6">Material Tailwind</Typography>
<Drawer.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
className="absolute right-2 top-2"
isCircular
color="secondary"
>
<Xmark className="h-5 w-5" />
</Drawer.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind features multiple React and HTML components, all
written with Tailwind CSS classes and Material Design guidelines.
</Typography>
<div className="mb-1 flex items-center gap-2">
<Button>Get Started</Button>
<Button color="secondary">Documentation</Button>
</div>
</Drawer.Panel>
</Drawer.Overlay>
</Drawer>
<Drawer>
<Drawer.Trigger as={Button}>Open Drawer Left</Drawer.Trigger>
<Drawer.Overlay>
<Drawer.Panel placement="left">
<div className="flex items-center justify-between gap-4">
<Typography type="h6">Material Tailwind</Typography>
<Drawer.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
className="absolute right-2 top-2"
isCircular
color="secondary"
>
<Xmark className="h-5 w-5" />
</Drawer.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind features multiple React and HTML components, all
written with Tailwind CSS classes and Material Design guidelines.
</Typography>
<div className="mb-1 flex items-center gap-2">
<Button>Get Started</Button>
<Button color="secondary">Documentation</Button>
</div>
</Drawer.Panel>
</Drawer.Overlay>
</Drawer>
</div>
);
}
"use client";
import {
Drawer,
Button,
Typography,
IconButton,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DrawerPlacement() {
return (
<div className="flex gap-4">
<Drawer>
<Drawer.Trigger as={Button}>Open Drawer Top</Drawer.Trigger>
<Drawer.Overlay>
<Drawer.Panel placement="top">
<div className="flex items-center justify-between gap-4">
<Typography type="h6">Material Tailwind</Typography>
<Drawer.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
className="absolute right-2 top-2"
isCircular
>
<Xmark className="h-5 w-5" />
</Drawer.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind features multiple React and HTML components, all
written with Tailwind CSS classes and Material Design guidelines.
</Typography>
<div className="mb-1 flex items-center gap-2">
<Button>Get Started</Button>
<Button color="secondary">Documentation</Button>
</div>
</Drawer.Panel>
</Drawer.Overlay>
</Drawer>
<Drawer>
<Drawer.Trigger as={Button}>Open Drawer Right</Drawer.Trigger>
<Drawer.Overlay>
<Drawer.Panel placement="right">
<div className="flex items-center justify-between gap-4">
<Typography type="h6">Material Tailwind</Typography>
<Drawer.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
className="absolute right-2 top-2"
isCircular
color="secondary"
>
<Xmark className="h-5 w-5" />
</Drawer.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind features multiple React and HTML components, all
written with Tailwind CSS classes and Material Design guidelines.
</Typography>
<div className="mb-1 flex items-center gap-2">
<Button>Get Started</Button>
<Button color="secondary">Documentation</Button>
</div>
</Drawer.Panel>
</Drawer.Overlay>
</Drawer>
<Drawer>
<Drawer.Trigger as={Button}>Open Drawer Bottom</Drawer.Trigger>
<Drawer.Overlay>
<Drawer.Panel placement="bottom">
<div className="flex items-center justify-between gap-4">
<Typography type="h6">Material Tailwind</Typography>
<Drawer.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
className="absolute right-2 top-2"
isCircular
color="secondary"
>
<Xmark className="h-5 w-5" />
</Drawer.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind features multiple React and HTML components, all
written with Tailwind CSS classes and Material Design guidelines.
</Typography>
<div className="mb-1 flex items-center gap-2">
<Button>Get Started</Button>
<Button color="secondary">Documentation</Button>
</div>
</Drawer.Panel>
</Drawer.Overlay>
</Drawer>
<Drawer>
<Drawer.Trigger as={Button}>Open Drawer Left</Drawer.Trigger>
<Drawer.Overlay>
<Drawer.Panel placement="left">
<div className="flex items-center justify-between gap-4">
<Typography type="h6">Material Tailwind</Typography>
<Drawer.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
className="absolute right-2 top-2"
isCircular
color="secondary"
>
<Xmark className="h-5 w-5" />
</Drawer.DismissTrigger>
</div>
<Typography className="mb-6 mt-2 text-foreground">
Material Tailwind features multiple React and HTML components, all
written with Tailwind CSS classes and Material Design guidelines.
</Typography>
<div className="mb-1 flex items-center gap-2">
<Button>Get Started</Button>
<Button color="secondary">Documentation</Button>
</div>
</Drawer.Panel>
</Drawer.Overlay>
</Drawer>
</div>
);
}
#Drawer with Navigation
Use this example to create a Drawer component with navigation links. You can use this Drawer component to display a list of links that the user can click on to navigate to different pages on your website. This is useful for dashboard layouts or admin panels.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
"use client";
import * as React from "react";
import {
Drawer,
Button,
Typography,
IconButton,
List,
Chip,
Card,
Collapse,
Input,
Avatar,
} from "@material-tailwind/react";
import {
Xmark,
Archive,
EmptyPage,
Folder,
LogOut,
Mail,
MoreHorizCircle,
NavArrowRight,
Pin,
Search,
SelectFace3d,
SendDiagonal,
Bin,
UserXmark,
} from "iconoir-react";
const Links = [
{
icon: Mail,
title: "Inbox",
href: "#",
badge: 14,
},
{
icon: SendDiagonal,
title: "Sent",
href: "#",
},
{
icon: EmptyPage,
title: "Drafts",
href: "#",
},
{
icon: Pin,
title: "Pins",
href: "#",
},
{
icon: Archive,
title: "Archive",
href: "#",
},
{
icon: Bin,
title: "Trash",
href: "#",
},
];
export function DrawerWithNavigation() {
const [isOpen, setIsOpen] = React.useState(false);
return (
<Drawer>
<Drawer.Trigger as={Button}>Open Drawer</Drawer.Trigger>
<Drawer.Overlay>
<Drawer.Panel placement="left" className="p-0">
<div className="flex items-center justify-between gap-4">
<Drawer.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
className="absolute right-2 top-2"
isCircular
>
<Xmark className="h-5 w-5" />
</Drawer.DismissTrigger>
</div>
<Card className="border-none shadow-none">
<Card.Header className="m-0 flex h-max items-center gap-2 px-3 pb-3 pt-4">
<Avatar size="xs" src="/logo.png" alt="brand" />
<Typography className="font-semibold">
Material Tailwind
</Typography>
</Card.Header>
<Card.Body className="p-3">
<Input type="search" placeholder="Search here...">
<Input.Icon>
<Search className="h-full w-full" />
</Input.Icon>
</Input>
<List className="mt-3">
{Links.map(({ icon: Icon, title, href, badge }) => (
<List.Item key={title} href={href}>
<List.ItemStart>
<Icon className="h-[18px] w-[18px]" />
</List.ItemStart>
{title}
{badge && (
<List.ItemEnd>
<Chip size="sm" variant="ghost">
<Chip.Label>{badge}</Chip.Label>
</Chip>
</List.ItemEnd>
)}
</List.Item>
))}
<hr className="-mx-3 my-3 border-secondary" />
<List.Item onClick={() => setIsOpen((cur) => !cur)}>
<List.ItemStart>
<MoreHorizCircle className="h-[18px] w-[18px]" />
</List.ItemStart>
More
<List.ItemEnd>
<NavArrowRight
className={`h-4 w-4 ${isOpen ? "rotate-90" : ""}`}
/>
</List.ItemEnd>
</List.Item>
<Collapse open={isOpen}>
<List>
<List.Item>
<List.ItemStart>
<Folder className="h-[18px] w-[18px]" />
</List.ItemStart>
Spam
</List.Item>
<List.Item>
<List.ItemStart>
<UserXmark className="h-[18px] w-[18px]" />
</List.ItemStart>
Blocked
</List.Item>
<List.Item>
<List.ItemStart>
<Folder className="h-[18px] w-[18px]" />
</List.ItemStart>
Important
</List.Item>
</List>
</Collapse>
<hr className="-mx-3 my-3 border-secondary" />
<List.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error">
<List.ItemStart>
<LogOut className="h-[18px] w-[18px]" />
</List.ItemStart>
Logout
</List.Item>
</List>
</Card.Body>
<Card.Footer className="p-3">
<Card color="primary" className="shadow-none">
<Card.Header className="m-3">
<SelectFace3d className="h-10 w-10 text-primary-foreground" />
</Card.Header>
<Card.Body>
<Typography type="h6" className="mb-1 text-white">
Upgrade to PRO
</Typography>
<Typography type="small" className="text-white/80">
Upgrade to Material Tailwind PRO and get even more
components, plugins, advanced features and premium.
</Typography>
</Card.Body>
<Card.Footer>
<Button
size="sm"
as="a"
href="#"
className="border-white bg-white text-black hover:border-white hover:bg-white hover:text-black"
>
Upgrade Now
</Button>
</Card.Footer>
</Card>
</Card.Footer>
</Card>
</Drawer.Panel>
</Drawer.Overlay>
</Drawer>
);
}
"use client";
import * as React from "react";
import {
Drawer,
Button,
Typography,
IconButton,
List,
Chip,
Card,
Collapse,
Input,
Avatar,
} from "@material-tailwind/react";
import {
Xmark,
Archive,
EmptyPage,
Folder,
LogOut,
Mail,
MoreHorizCircle,
NavArrowRight,
Pin,
Search,
SelectFace3d,
SendDiagonal,
Bin,
UserXmark,
} from "iconoir-react";
const Links = [
{
icon: Mail,
title: "Inbox",
href: "#",
badge: 14,
},
{
icon: SendDiagonal,
title: "Sent",
href: "#",
},
{
icon: EmptyPage,
title: "Drafts",
href: "#",
},
{
icon: Pin,
title: "Pins",
href: "#",
},
{
icon: Archive,
title: "Archive",
href: "#",
},
{
icon: Bin,
title: "Trash",
href: "#",
},
];
export function DrawerWithNavigation() {
const [isOpen, setIsOpen] = React.useState(false);
return (
<Drawer>
<Drawer.Trigger as={Button}>Open Drawer</Drawer.Trigger>
<Drawer.Overlay>
<Drawer.Panel placement="left" className="p-0">
<div className="flex items-center justify-between gap-4">
<Drawer.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
className="absolute right-2 top-2"
isCircular
>
<Xmark className="h-5 w-5" />
</Drawer.DismissTrigger>
</div>
<Card className="border-none shadow-none">
<Card.Header className="m-0 flex h-max items-center gap-2 px-3 pb-3 pt-4">
<Avatar size="xs" src="/logo.png" alt="brand" />
<Typography className="font-semibold">
Material Tailwind
</Typography>
</Card.Header>
<Card.Body className="p-3">
<Input type="search" placeholder="Search here...">
<Input.Icon>
<Search className="h-full w-full" />
</Input.Icon>
</Input>
<List className="mt-3">
{Links.map(({ icon: Icon, title, href, badge }) => (
<List.Item key={title} href={href}>
<List.ItemStart>
<Icon className="h-[18px] w-[18px]" />
</List.ItemStart>
{title}
{badge && (
<List.ItemEnd>
<Chip size="sm" variant="ghost">
<Chip.Label>{badge}</Chip.Label>
</Chip>
</List.ItemEnd>
)}
</List.Item>
))}
<hr className="-mx-3 my-3 border-secondary" />
<List.Item onClick={() => setIsOpen((cur) => !cur)}>
<List.ItemStart>
<MoreHorizCircle className="h-[18px] w-[18px]" />
</List.ItemStart>
More
<List.ItemEnd>
<NavArrowRight
className={`h-4 w-4 ${isOpen ? "rotate-90" : ""}`}
/>
</List.ItemEnd>
</List.Item>
<Collapse open={isOpen}>
<List>
<List.Item>
<List.ItemStart>
<Folder className="h-[18px] w-[18px]" />
</List.ItemStart>
Spam
</List.Item>
<List.Item>
<List.ItemStart>
<UserXmark className="h-[18px] w-[18px]" />
</List.ItemStart>
Blocked
</List.Item>
<List.Item>
<List.ItemStart>
<Folder className="h-[18px] w-[18px]" />
</List.ItemStart>
Important
</List.Item>
</List>
</Collapse>
<hr className="-mx-3 my-3 border-secondary" />
<List.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error">
<List.ItemStart>
<LogOut className="h-[18px] w-[18px]" />
</List.ItemStart>
Logout
</List.Item>
</List>
</Card.Body>
<Card.Footer className="p-3">
<Card color="primary" className="shadow-none">
<Card.Header className="m-3">
<SelectFace3d className="h-10 w-10 text-primary-foreground" />
</Card.Header>
<Card.Body>
<Typography type="h6" className="mb-1 text-white">
Upgrade to PRO
</Typography>
<Typography type="small" className="text-white/80">
Upgrade to Material Tailwind PRO and get even more
components, plugins, advanced features and premium.
</Typography>
</Card.Body>
<Card.Footer>
<Button
size="sm"
as="a"
href="#"
className="border-white bg-white text-black hover:border-white hover:bg-white hover:text-black"
>
Upgrade Now
</Button>
</Card.Footer>
</Card>
</Card.Footer>
</Card>
</Drawer.Panel>
</Drawer.Overlay>
</Drawer>
);
}
#Drawer With Form
Use this example to create a Drawer component with a form. You can use this Drawer component to display a form that the user can fill out and submit. This is useful for contact forms or feedback forms on your website.
In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.
"use client";
import {
Drawer,
Button,
Typography,
IconButton,
Input,
Textarea,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DrawerWithForm() {
return (
<Drawer>
<Drawer.Trigger as={Button}>Open Drawer</Drawer.Trigger>
<Drawer.Overlay>
<Drawer.Panel placement="left">
<div className="flex items-center justify-between gap-4">
<Typography type="h6">Contact Us</Typography>
<Drawer.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
className="absolute right-2 top-2"
isCircular
>
<Xmark className="h-5 w-5" />
</Drawer.DismissTrigger>
</div>
<Typography type="small" className="mb-6 mt-4 text-foreground">
Write the message and then click button.
</Typography>
<div className="mt-6 space-y-4">
<Input id="email" type="email" placeholder="Email" />
<Input placeholder="Subject" />
<Textarea placeholder="Message" />
<Button isFullWidth>Send message</Button>
</div>
</Drawer.Panel>
</Drawer.Overlay>
</Drawer>
);
}
"use client";
import {
Drawer,
Button,
Typography,
IconButton,
Input,
Textarea,
} from "@material-tailwind/react";
import { Xmark } from "iconoir-react";
export function DrawerWithForm() {
return (
<Drawer>
<Drawer.Trigger as={Button}>Open Drawer</Drawer.Trigger>
<Drawer.Overlay>
<Drawer.Panel placement="left">
<div className="flex items-center justify-between gap-4">
<Typography type="h6">Contact Us</Typography>
<Drawer.DismissTrigger
as={IconButton}
size="sm"
variant="ghost"
color="secondary"
className="absolute right-2 top-2"
isCircular
>
<Xmark className="h-5 w-5" />
</Drawer.DismissTrigger>
</div>
<Typography type="small" className="mb-6 mt-4 text-foreground">
Write the message and then click button.
</Typography>
<div className="mt-6 space-y-4">
<Input id="email" type="email" placeholder="Email" />
<Input placeholder="Subject" />
<Textarea placeholder="Message" />
<Button isFullWidth>Send message</Button>
</div>
</Drawer.Panel>
</Drawer.Overlay>
</Drawer>
);
}
