We just released 290+ PRO Blocks for React and Tailwind CSS. Check them out

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.

1import {
2  Drawer,
3  Button,
4  Typography,
5  IconButton,
6} from "@material-tailwind/react";
7import { Xmark } from "iconoir-react";
8
9export default function DrawerDemo() {
10  return (
11    <Drawer>
12      <Drawer.Trigger as={Button}>Open Drawer</Drawer.Trigger>
13      <Drawer.Overlay>
14        <Drawer.Panel>
15          <div className="flex items-center justify-between gap-4">
16            <Typography type="h6">Material Tailwind</Typography>
17            <Drawer.DismissTrigger
18              as={IconButton}
19              size="sm"
20              variant="ghost"
21              color="secondary"
22              className="absolute right-2 top-2"
23              isCircular
24            >
25              <Xmark className="h-5 w-5" />
26            </Drawer.DismissTrigger>
27          </div>
28          <Typography className="mb-6 mt-2 text-foreground">
29            Material Tailwind features multiple React and HTML components, all
30            written with Tailwind CSS classes and Material Design guidelines.
31          </Typography>
32          <div className="mb-1 flex items-center gap-2">
33            <Button>Get Started</Button>
34            <Button color="secondary">Documentation</Button>
35          </div>
36        </Drawer.Panel>
37      </Drawer.Overlay>
38    </Drawer>
39  );
40}
41

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.

1import {
2  Drawer,
3  Button,
4  Typography,
5  IconButton,
6} from "@material-tailwind/react";
7import { Xmark } from "iconoir-react";
8
9export default function DrawerPlacement() {
10  return (
11    <div className="flex gap-4">
12      <Drawer>
13        <Drawer.Trigger as={Button}>Open Drawer Top</Drawer.Trigger>
14        <Drawer.Overlay>
15          <Drawer.Panel placement="top">
16            <div className="flex items-center justify-between gap-4">
17              <Typography type="h6">Material Tailwind</Typography>
18              <Drawer.DismissTrigger
19                as={IconButton}
20                size="sm"
21                variant="ghost"
22                color="secondary"
23                className="absolute right-2 top-2"
24                isCircular
25              >
26                <Xmark className="h-5 w-5" />
27              </Drawer.DismissTrigger>
28            </div>
29            <Typography className="mb-6 mt-2 text-foreground">
30              Material Tailwind features multiple React and HTML components, all
31              written with Tailwind CSS classes and Material Design guidelines.
32            </Typography>
33            <div className="mb-1 flex items-center gap-2">
34              <Button>Get Started</Button>
35              <Button color="secondary">Documentation</Button>
36            </div>
37          </Drawer.Panel>
38        </Drawer.Overlay>
39      </Drawer>
40      <Drawer>
41        <Drawer.Trigger as={Button}>Open Drawer Right</Drawer.Trigger>
42        <Drawer.Overlay>
43          <Drawer.Panel placement="right">
44            <div className="flex items-center justify-between gap-4">
45              <Typography type="h6">Material Tailwind</Typography>
46              <Drawer.DismissTrigger
47                as={IconButton}
48                size="sm"
49                variant="ghost"
50                className="absolute right-2 top-2"
51                isCircular
52                color="secondary"
53              >
54                <Xmark className="h-5 w-5" />
55              </Drawer.DismissTrigger>
56            </div>
57            <Typography className="mb-6 mt-2 text-foreground">
58              Material Tailwind features multiple React and HTML components, all
59              written with Tailwind CSS classes and Material Design guidelines.
60            </Typography>
61            <div className="mb-1 flex items-center gap-2">
62              <Button>Get Started</Button>
63              <Button color="secondary">Documentation</Button>
64            </div>
65          </Drawer.Panel>
66        </Drawer.Overlay>
67      </Drawer>
68      <Drawer>
69        <Drawer.Trigger as={Button}>Open Drawer Bottom</Drawer.Trigger>
70        <Drawer.Overlay>
71          <Drawer.Panel placement="bottom">
72            <div className="flex items-center justify-between gap-4">
73              <Typography type="h6">Material Tailwind</Typography>
74              <Drawer.DismissTrigger
75                as={IconButton}
76                size="sm"
77                variant="ghost"
78                className="absolute right-2 top-2"
79                isCircular
80                color="secondary"
81              >
82                <Xmark className="h-5 w-5" />
83              </Drawer.DismissTrigger>
84            </div>
85            <Typography className="mb-6 mt-2 text-foreground">
86              Material Tailwind features multiple React and HTML components, all
87              written with Tailwind CSS classes and Material Design guidelines.
88            </Typography>
89            <div className="mb-1 flex items-center gap-2">
90              <Button>Get Started</Button>
91              <Button color="secondary">Documentation</Button>
92            </div>
93          </Drawer.Panel>
94        </Drawer.Overlay>
95      </Drawer>
96      <Drawer>
97        <Drawer.Trigger as={Button}>Open Drawer Left</Drawer.Trigger>
98        <Drawer.Overlay>
99          <Drawer.Panel placement="left">
100            <div className="flex items-center justify-between gap-4">
101              <Typography type="h6">Material Tailwind</Typography>
102              <Drawer.DismissTrigger
103                as={IconButton}
104                size="sm"
105                variant="ghost"
106                className="absolute right-2 top-2"
107                isCircular
108                color="secondary"
109              >
110                <Xmark className="h-5 w-5" />
111              </Drawer.DismissTrigger>
112            </div>
113            <Typography className="mb-6 mt-2 text-foreground">
114              Material Tailwind features multiple React and HTML components, all
115              written with Tailwind CSS classes and Material Design guidelines.
116            </Typography>
117            <div className="mb-1 flex items-center gap-2">
118              <Button>Get Started</Button>
119              <Button color="secondary">Documentation</Button>
120            </div>
121          </Drawer.Panel>
122        </Drawer.Overlay>
123      </Drawer>
124    </div>
125  );
126}
127

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.

1import * as React from "react";
2
3import {
4  Drawer,
5  Button,
6  Typography,
7  IconButton,
8  List,
9  Chip,
10  Card,
11  Collapse,
12  Input,
13  Avatar,
14} from "@material-tailwind/react";
15import {
16  Xmark,
17  Archive,
18  EmptyPage,
19  Folder,
20  LogOut,
21  Mail,
22  MoreHorizCircle,
23  NavArrowRight,
24  Pin,
25  Search,
26  SelectFace3d,
27  SendDiagonal,
28  Bin,
29  UserXmark,
30} from "iconoir-react";
31
32const Links = [
33  {
34    icon: Mail,
35    title: "Inbox",
36    href: "#",
37    badge: 14,
38  },
39  {
40    icon: SendDiagonal,
41    title: "Sent",
42    href: "#",
43  },
44  {
45    icon: EmptyPage,
46    title: "Drafts",
47    href: "#",
48  },
49  {
50    icon: Pin,
51    title: "Pins",
52    href: "#",
53  },
54  {
55    icon: Archive,
56    title: "Archive",
57    href: "#",
58  },
59  {
60    icon: Bin,
61    title: "Trash",
62    href: "#",
63  },
64];
65export default function DrawerWithNavigation() {
66  const [isOpen, setIsOpen] = React.useState(false);
67
68  return (
69    <Drawer>
70      <Drawer.Trigger as={Button}>Open Drawer</Drawer.Trigger>
71      <Drawer.Overlay>
72        <Drawer.Panel placement="left" className="p-0">
73          <div className="flex items-center justify-between gap-4">
74            <Drawer.DismissTrigger
75              as={IconButton}
76              size="sm"
77              variant="ghost"
78              color="secondary"
79              className="absolute right-2 top-2"
80              isCircular
81            >
82              <Xmark className="h-5 w-5" />
83            </Drawer.DismissTrigger>
84          </div>
85          <Card className="border-none shadow-none">
86            <Card.Header className="m-0 flex h-max items-center gap-2 px-3 pb-3 pt-4">
87              <Avatar size="xs" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/ct-assets/logo.png" alt="brand" />
88              <Typography className="font-semibold">
89                Material Tailwind
90              </Typography>
91            </Card.Header>
92            <Card.Body className="p-3">
93              <Input type="search" placeholder="Search here...">
94                <Input.Icon>
95                  <Search className="h-full w-full" />
96                </Input.Icon>
97              </Input>
98              <List className="mt-3">
99                {Links.map(({ icon: Icon, title, href, badge }) => (
100                  <List.Item key={title} href={href}>
101                    <List.ItemStart>
102                      <Icon className="h-[18px] w-[18px]" />
103                    </List.ItemStart>
104                    {title}
105                    {badge && (
106                      <List.ItemEnd>
107                        <Chip size="sm" variant="ghost">
108                          <Chip.Label>{badge}</Chip.Label>
109                        </Chip>
110                      </List.ItemEnd>
111                    )}
112                  </List.Item>
113                ))}
114                <hr className="-mx-3 my-3 border-secondary" />
115                <List.Item onClick={() => setIsOpen((cur) => !cur)}>
116                  <List.ItemStart>
117                    <MoreHorizCircle className="h-[18px] w-[18px]" />
118                  </List.ItemStart>
119                  More
120                  <List.ItemEnd>
121                    <NavArrowRight
122                      className={`h-4 w-4 ${isOpen ? "rotate-90" : ""}`}
123                    />
124                  </List.ItemEnd>
125                </List.Item>
126                <Collapse open={isOpen}>
127                  <List>
128                    <List.Item>
129                      <List.ItemStart>
130                        <Folder className="h-[18px] w-[18px]" />
131                      </List.ItemStart>
132                      Spam
133                    </List.Item>
134                    <List.Item>
135                      <List.ItemStart>
136                        <UserXmark className="h-[18px] w-[18px]" />
137                      </List.ItemStart>
138                      Blocked
139                    </List.Item>
140                    <List.Item>
141                      <List.ItemStart>
142                        <Folder className="h-[18px] w-[18px]" />
143                      </List.ItemStart>
144                      Important
145                    </List.Item>
146                  </List>
147                </Collapse>
148                <hr className="-mx-3 my-3 border-secondary" />
149                <List.Item className="text-error hover:bg-error/10 hover:text-error focus:bg-error/10 focus:text-error">
150                  <List.ItemStart>
151                    <LogOut className="h-[18px] w-[18px]" />
152                  </List.ItemStart>
153                  Logout
154                </List.Item>
155              </List>
156            </Card.Body>
157            <Card.Footer className="p-3">
158              <Card color="primary" className="shadow-none">
159                <Card.Header className="m-3">
160                  <SelectFace3d className="h-10 w-10 text-primary-foreground" />
161                </Card.Header>
162                <Card.Body>
163                  <Typography type="h6" className="mb-1 text-white">
164                    Upgrade to PRO
165                  </Typography>
166                  <Typography type="small" className="text-white/80">
167                    Upgrade to Material Tailwind PRO and get even more
168                    components, plugins, advanced features and premium.
169                  </Typography>
170                </Card.Body>
171                <Card.Footer>
172                  <Button
173                    size="sm"
174                    as="a"
175                    href="#"
176                    className="border-white bg-white text-black hover:border-white hover:bg-white hover:text-black"
177                  >
178                    Upgrade Now
179                  </Button>
180                </Card.Footer>
181              </Card>
182            </Card.Footer>
183          </Card>
184        </Drawer.Panel>
185      </Drawer.Overlay>
186    </Drawer>
187  );
188}
189

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.

1import {
2  Drawer,
3  Button,
4  Typography,
5  IconButton,
6  Input,
7  Textarea,
8} from "@material-tailwind/react";
9import { Xmark } from "iconoir-react";
10
11export default function DrawerWithForm() {
12  return (
13    <Drawer>
14      <Drawer.Trigger as={Button}>Open Drawer</Drawer.Trigger>
15      <Drawer.Overlay>
16        <Drawer.Panel placement="left">
17          <div className="flex items-center justify-between gap-4">
18            <Typography type="h6">Contact Us</Typography>
19            <Drawer.DismissTrigger
20              as={IconButton}
21              size="sm"
22              variant="ghost"
23              color="secondary"
24              className="absolute right-2 top-2"
25              isCircular
26            >
27              <Xmark className="h-5 w-5" />
28            </Drawer.DismissTrigger>
29          </div>
30          <Typography type="small" className="mb-6 mt-4 text-foreground">
31            Write the message and then click button.
32          </Typography>
33          <div className="mt-6 space-y-4">
34            <Input id="email" type="email" placeholder="Email" />
35            <Input placeholder="Subject" />
36            <Textarea placeholder="Message" />
37            <Button isFullWidth>Send message</Button>
38          </div>
39        </Drawer.Panel>
40      </Drawer.Overlay>
41    </Drawer>
42  );
43}
44