How to make Drawer using Material UI ?
Last Updated :
09 Dec, 2020
Material UI Drawer is the most widely used component of Material UI. Material UI Drawer is used as a navigation bar of the website which displays a list of items and then clicking on the item the user will be redirected to the specific part of the web page/website. It is seen in almost all the websites as they provide better user interaction and easy to navigate in between the different parts of the application.
Some important props and types of Material UI Drawer are shown below:
| S.No |
Prop Name |
Allowed Values |
Default Value |
Description |
| 1 |
anchor |
‘bottom’, ‘left’, ‘top’, ‘right’ |
left |
Indicates the side from where the drawer will appear |
| 2 |
open |
true, false |
false |
Specifies whether the drawer should be visible or not |
| 3 |
onClose |
– |
– |
Callback method triggered when the drawer is requested to close |
| 4 |
variant |
‘permanent’, ‘persistent, ‘temporary’ |
temporary |
Indicates the visibility status of the drawer |
Material UI provides three types of Drawers broadly:
1. Temporary Drawer: This drawer will be displayed on the web page only when a true value is passed to the open prop. The drawer appears as a modal on top of the current web page by giving a shady background to the content as in our example below.
2. Persistent Drawer: This drawer is visible on the web page when a true value is passed to the open prop but unlike a temporary drawer, it occupies a certain amount of space in the current web page by adjusting the content of the web page.
3. Permanent Drawer: Here the drawer is always visible to the user. Here no need to pass the open prop to the Drawer component.
Prerequisites: A small scale working ReactJS project.
Basic Knowledge of React Js.
Example: We will design a Home Page which has a Menu Icon on the top left when clicked displays two menu items as listed below:
- About Us
- Contact Us
Where each menu when clicked, takes us to the corresponding page of the application.
Module Installation: But before we go ahead we need to install the following packages into our project. Open your terminal and type the following commands:
npm i @material-ui/core
It installs the React Components into our project. In our case, it installs the Drawer component.
npm i react-router-dom
This provides the routing components for the websites. In simple words, this is required for redirecting the user from one part of the application to another.
npm i @material-ui/icons
The above command will install the Material UI Icons. It is optional to install.
All the above commands should make changes to your package.json in your project that looks like this:
"dependencies": {
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
// Other dependencies starts from here
......................
},
Example:1 Move into your src folder by using the following command:
cd src
Now let’s create three web pages called Home.js, About.js, and Contact.js as shown below:
Filename: Home.js
Javascript
import React from 'react';
const styles = {
home: {
padding: '50px',
textAlign: 'center',
backgroundColor: '#28462f',
color: 'white',
}
};
export default class Home extends React.Component {
render() {
return <div style={styles.home}>
<h1>Home Page</h1>
<p>This is the Landing Page of the Application</p>
</div>;
}
}
|
Output:
Filename: Contact.js
Javascript
import React from 'react';
const styles = {
contact: {
padding: '50px',
textAlign: 'center',
backgroundColor: '#46282d',
color: 'white',
}
};
export default class Contact extends React.Component {
render() {
return <div style={styles.contact}>
<h1>Contact Us Page</h1>
<p>Some text about how to contact us.</p>
</div>;
}
}
|
Output:
Filename: About.js
Javascript
import React from 'react';
const styles = {
about: {
padding: '50px',
textAlign: 'center',
backgroundColor: '#474e5d',
color: 'white',
}
};
export default class About extends React.Component {
render() {
return <div style={styles.about}>
<h1>About Us Page</h1>
<p>Some text about who we are and what we do.</p>
</div>;
}
}
|
Output:
These are the pages that we get switch in between by clicking on the drawer. Now it’s the time to integrate all the above components. Create another file called drawer.js as shown below:
Filename: drawer.js
Javascript
import React from 'react';
import { Drawer, Divider, IconButton }
from '@material-ui/core';
import { List, ListItem, ListItemIcon, ListItemText }
from '@material-ui/core';
import PermContactCalendarIcon from
'@material-ui/icons/PermContactCalendar';
import ReorderIcon from '@material-ui/icons/Reorder';
import AccountCircleIcon from
'@material-ui/icons/AccountCircle';
import { Link } from 'react-router-dom';
const styles = {
sideNav: {
marginTop: '-60px',
zIndex: 3,
marginLeft: '0px',
position: 'fixed',
},
link: {
color: 'black',
textDecoration: 'none',
}
};
export default class MarerialUIDrawer
extends React.Component {
constructor(props) {
super(props);
this.state = {
isDrawerOpened: false,
};
}
toggleDrawerStatus = () => {
this.setState({
isDrawerOpened: true,
})
}
closeDrawer = () => {
this.setState({
isDrawerOpened: false,
})
}
render() {
const { isDrawerOpened } = this.state;
return (
<div>
<div style={styles.sideNav}>
<IconButton onClick={this.toggleDrawerStatus}>
{!isDrawerOpened ? <ReorderIcon /> : null }
</IconButton>
</div>
<Divider/>
<Drawer
variant="temporary"
open={isDrawerOpened}
onClose={this.closeDrawer}
>
<Link to='/about' style={styles.link}>
<List>
<ListItem button key='About Us'>
<ListItemIcon><AccountCircleIcon/>
</ListItemIcon>
<ListItemText primary='About Us' />
</ListItem>
</List>
</Link>
<Link to='/contact' style={styles.link}>
<List>
<ListItem button key='Contact Us'>
<ListItemIcon><PermContactCalendarIcon/>
</ListItemIcon>
<ListItemText primary='Contact Us' />
</ListItem>
</List>
</Link>
</Drawer>
</div>
);
}
}
|
Here in this example we have used icons for About Us, Contact Us and also to the button that will open the drawer for us. Some simple and intuitive names(text) can also be given instead of icons.
Last and final step is to give the proper routing pattern to each component and to import our Drawer in App.js as shown below:
Filename: App.js
Javascript
import './App.css';
import Home from './Home';
import Contact from './Contact';
import About from './About';
import MarerialUIDrawer from './drawer';
import { BrowserRouter, Route, Switch }
from 'react-router-dom';
function App() {
return (
<div className="App">
<h1 style={{color: '#323576'}}>Material-UI Drawer</h1>
<BrowserRouter>
<MarerialUIDrawer/>
<Switch>
<Route exact path='/' render=
{props => <Home {...props} /> }/>
<Route exact path='/about' render=
{props => <About {...props} /> }/>
<Route exact path='/contact' render=
{props => <Contact {...props} /> }/>
</Switch>
</BrowserRouter>
</div>
);
}
export default App;
|
Output:
Note: This is an example of a Temporary Drawer. It displayed the list as a modal on the left side(by default). Add an anchor property to the Drawer component in drawer.js and give some values to observe the changes. Similarly, change the variant property values to check for the persistent and permanent drawers.
Reference: Know more about Material UI Drawer, check the official documentation from the following link: https://material-ui.com/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...