Close
Close full mode
logoWebDevAssist

How to create a Navigation drawer in Material-UI react

Material-UI Navigation drawer example:

In this post, we will learn how to create a drawer in Material-UI react. Material-UI provides a component called Drawer to create navigation drawers.

YouTube video:

I have published one video on YouTube, you can watch it here:

How to use Drawer component:

Drawer component is used to create a navigation drawer. It can be imported as like below:

import { Drawer } from "@material-ui/core";

Example of Drawer:

We need to pass one List inside the Drawer component. Let's take a look at the below program:

import {
Drawer,
ListItem,
ListItemIcon,
ListItemText,
Button,
} from "@material-ui/core";
import {
CheckBoxOutlineBlankOutlined,
DraftsOutlined,
HomeOutlined,
InboxOutlined,
MailOutline,
ReceiptOutlined,
} from "@material-ui/icons";
import { useState } from "react";
const data = [
{
name: "Home",
icon: <HomeOutlined />,
},
{ name: "Inbox", icon: <InboxOutlined /> },
{ name: "Outbox", icon: <CheckBoxOutlineBlankOutlined /> },
{ name: "Sent mail", icon: <MailOutline /> },
{ name: "Draft", icon: <DraftsOutlined /> },
{ name: "Trash", icon: <ReceiptOutlined /> },
];
function App() {
const [open, setOpen] = useState(false);
const getList = () => (
<div style={{ width: 250 }} onClick={() => setOpen(false)}>
{data.map((item, index) => (
<ListItem button key={index}>
<ListItemIcon>{item.icon}</ListItemIcon>
<ListItemText primary={item.name} />
</ListItem>
))}
</div>
);
return (
<div>
<Button onClick={() => setOpen(true)}>Click me</Button>
<Drawer open={open} anchor={"left"} onClose={() => setOpen(false)}>
{getList()}
</Drawer>
</div>
);
}
export default App;
  • open boolean variable defines if the drawer is open or close.
  • getList method returns a list of items that we are showing on the drawer. On clicing any item it changes the value of open to false, i.e. it will hide the drawer.
  • data array holds the title and icon to show in the drawer. We are using a map to create ListItem components.
  • The anchor props defines where to show the drawer.

Material-UI Navigation drawer
Material-UI Navigation drawer

Permanent drawer:

By default, drawer is shown above the view or above the screen. We can also use the props variant as permanent to make it show always. persistant variant is used by default.

<Drawer
variant="permanent"
open={open}
anchor={"left"}
onClose={() => setOpen(false)}
>
{getList()}
</Drawer>

It will create one drawer as like below:

material-ui permanent navigation drawer
material-ui permanent navigation drawer

Adding a divider:

We can add a divider between drawer items. For that, we need to use the Divider component. For example:

<div>
<Button onClick={() => setOpen(true)}>Click me</Button>
<Drawer
variant="permanent"
open={open}
anchor={"left"}
onClose={() => setOpen(false)}
>
{getList()}
<Divider />
{getList()}
</Drawer>
</div>

It will create the below drawer:

Material-UI drawer divider
Material-UI drawer divider

Complete program:

import {
Drawer,
ListItem,
ListItemIcon,
ListItemText,
Button,
Divider,
} from "@material-ui/core";
import {
CheckBoxOutlineBlankOutlined,
DraftsOutlined,
HomeOutlined,
InboxOutlined,
MailOutline,
ReceiptOutlined,
} from "@material-ui/icons";
import { useState } from "react";
const data = [
{
name: "Home",
icon: <HomeOutlined />,
},
{ name: "Inbox", icon: <InboxOutlined /> },
{ name: "Outbox", icon: <CheckBoxOutlineBlankOutlined /> },
{ name: "Sent mail", icon: <MailOutline /> },
{ name: "Draft", icon: <DraftsOutlined /> },
{ name: "Trash", icon: <ReceiptOutlined /> },
];
function App() {
const [open, setOpen] = useState(false);
const getList = () => (
<div style={{ width: 250 }} onClick={() => setOpen(false)}>
{data.map((item, index) => (
<ListItem button key={index}>
<ListItemIcon>{item.icon}</ListItemIcon>
<ListItemText primary={item.name} />
</ListItem>
))}
</div>
);
return (
<div>
<Button onClick={() => setOpen(true)}>Click me</Button>
<Drawer
variant="permanent"
open={open}
anchor={"left"}
onClose={() => setOpen(false)}
>
{getList()}
<Divider />
{getList()}
</Drawer>
</div>
);
}
export default App;

Subscribe to our Newsletter

Previous
How to create a bottom navigation in Material-UI react
Next
How to create Material Tabs in Material-UI react