React MUI Drawer Navigation
React MUI Drawer Navigation provide easy access to destinations and functionality such as switching accounts.
React MUI Drawer Navigation
React MUI Drawer Navigation offer user-friendly access to various destinations within a site or app, provide access to functionalities like switching to different pages of website. It is also refered as sidebar navigation.It can either be permanently on-screen or controlled by a menu icon.
React MUI Drawer Syntax:
{
(['left', 'right', 'top', 'bottom'] as const)
.map((anchor) => (
<React.Fragment key={anchor}>
<Button>{anchor}</Button>
<Drawer>
...
</Drawer>
</React.Fragment>
))
}
React MUI Drawer types:
- Temporary drawer: This drawer can toggle open or closed and closed by default. The drawer opens temporarily above all other content until any section is selected.
- Responsive drawer: This drawer is responsive in nature.
- Persistent drawer: In this navigation, the drawer can toggle open or closed. It is on the same surface elevation as the content and is closed by default and opens by selecting the menu icon and stays open until it is closed.
- Mini variant drawer: In this drawer navigation, the persistent navigation drawer changes its width.
- Permanent drawer: They are always visible and aligned to the left edge with the same elevation as the content or background and cannot be closed.
React MUI Drawer API:
The drawer API’s are:
- <Drawer />
- <SwipeableDrawer />
React MUI Drawer Navigation Examples:
Below are the examples of React MUI Drawer Navigation, one as a temporary drawer and one as responsive drawer.
Example 1: React MUI temporary drawer
Below example demonstrates the React MUI temporary drawer.
Javascript
import React from "react" ; import { Typography } from "@mui/material" ; import Box from "@mui/material/Box" ; import Drawer from "@mui/material/Drawer" ; import Button from "@mui/material/Button" ; import List from "@mui/material/List" ; import Divider from "@mui/material/Divider" ; import ListItemButton from "@mui/material/ListItemButton" ; import ListItemIcon from "@mui/material/ListItemIcon" ; import ListItemText from "@mui/material/ListItemText" ; import { CollectionsBookmark, Edit, Feedback, Help, PermMedia, UploadFile, Work, } from "@mui/icons-material" ; function App() { const [state, setState] = React.useState({ top: false , left: false , bottom: false , right: false , }); const toggleDrawer = (anchor, open) => (event) => { if ( event.type === "keydown" && (event.key === "Tab" || event.key === "Shift" ) ) { return ; } setState({ ...state, [anchor]: open }); }; const iemsList = (anchor) => ( <Box sx={{ width: anchor === "top" || anchor === "bottom" ? "auto" : 250, backgroundColor: "#09212E" , height: '100%' }} role= "drawer" onClick={toggleDrawer(anchor, false )} onKeyDown={toggleDrawer(anchor, false )} > <Typography sx={{ textAlign: "center" , pt: 4, color: "green" , fontSize: 20 }} > w3wiki </Typography> <List> <ListItemButton sx={{ color: "white" }}> <ListItemIcon sx={{ color: "white" }}> {<Help />} </ListItemIcon> <ListItemText primary={ "How to write" } /> </ListItemButton> <ListItemButton sx={{ color: "white" }}> <ListItemIcon sx={{ color: "white" }}> {<CollectionsBookmark />} </ListItemIcon> <ListItemText primary={ "Posts" } /> </ListItemButton> <ListItemButton sx={{ color: "white" }}> <ListItemIcon sx={{ color: "white" }}> {<UploadFile />} </ListItemIcon> <ListItemText primary={ "Pick Article" } /> </ListItemButton> <ListItemButton sx={{ color: "white" }}> <ListItemIcon sx={{ color: "white" }}> {<Edit />} </ListItemIcon> <ListItemText primary={ "Improve" } /> </ListItemButton> </List> <Divider /> <List> <ListItemButton sx={{ color: "white" }}> <ListItemIcon sx={{ color: "white" }}> {<Edit />} </ListItemIcon> <ListItemText primary={ "Suggest" } /> </ListItemButton> <ListItemButton sx={{ color: "white" }}> <ListItemIcon sx={{ color: "white" }}> {<Work />} </ListItemIcon> <ListItemText primary={ "Work with us" } /> </ListItemButton> <ListItemButton sx={{ color: "white" }}> <ListItemIcon sx={{ color: "white" }}> {<PermMedia />} </ListItemIcon> <ListItemText primary={ "Media" } /> </ListItemButton> <ListItemButton sx={{ color: "white" }}> <ListItemIcon sx={{ color: "white" }}> {<Feedback />} </ListItemIcon> <ListItemText primary={ "Contact us" } /> </ListItemButton> </List> <Typography sx={{ backgroundColor: "blue" , color: "white" , borderRadius: 10, textAlign: "center" , padding: 1, margin: 2, }} > Sign In </Typography> </Box> ); return ( <div> <div style={{ textAlign: "center" , color: "green" }}> <h1>w3wiki</h1> <h2>React MUI Drawer Navigation</h2> </div> <center> {[ "left" , "right" , "top" , "bottom" ].map((anchor) => ( <React.Fragment key={anchor}> <Button onClick={toggleDrawer(anchor, true )}> {anchor} </Button> <Drawer anchor={anchor} open={state[anchor]} onClose={toggleDrawer(anchor, false )} > {iemsList(anchor)} </Drawer> </React.Fragment> ))} </center> </div> ); } export default App; |
Output:
Example 2: React MUI responsive drawer
Below example demonstrates the React MUI responsive drawer.
Javascript
// Filename - App.js import React from "react" ; import AppBar from "@mui/material/AppBar" ; import Box from "@mui/material/Box" ; import CssBaseline from "@mui/material/CssBaseline" ; import Divider from "@mui/material/Divider" ; import Drawer from "@mui/material/Drawer" ; import IconButton from "@mui/material/IconButton" ; import List from "@mui/material/List" ; import ListItemButton from "@mui/material/ListItemButton" ; import ListItemIcon from "@mui/material/ListItemIcon" ; import ListItemText from "@mui/material/ListItemText" ; import MenuIcon from "@mui/icons-material/Menu" ; import Toolbar from "@mui/material/Toolbar" ; import Typography from "@mui/material/Typography" ; import { CollectionsBookmark, Edit, Feedback, Help, PermMedia, UploadFile, Work, } from "@mui/icons-material" ; const drawWidth = 220; function App() { const [mobileViewOpen, setMobileViewOpen] = React.useState( false ); const handleToggle = () => { setMobileViewOpen(!mobileViewOpen); }; const responsiveDrawer = ( <div style={{ backgroundColor: "#09212E" , height: "100%" }}> <Toolbar /> <Divider /> <Typography sx={{ textAlign: "center" , pt: 4, color: "green" , fontSize: 20 }} > w3wiki </Typography> <List sx={{ backgroundColor: "#09212E" }}> <ListItemButton sx={{ color: "white" }}> <ListItemIcon sx={{ color: "white" }}> {<Help />} </ListItemIcon> <ListItemText primary={ "How to write" } /> </ListItemButton> <ListItemButton sx={{ color: "white" }}> <ListItemIcon sx={{ color: "white" }}> {<CollectionsBookmark />} </ListItemIcon> <ListItemText primary={ "Posts" } /> </ListItemButton> <ListItemButton sx={{ color: "white" }}> <ListItemIcon sx={{ color: "white" }}> {<UploadFile />} </ListItemIcon> <ListItemText primary={ "Pick Article" } /> </ListItemButton> <ListItemButton sx={{ color: "white" }}> <ListItemIcon sx={{ color: "white" }}> {<Edit />} </ListItemIcon> <ListItemText primary={ "Improve" } /> </ListItemButton> </List> <Divider /> <List> <ListItemButton sx={{ color: "white" }}> <ListItemIcon sx={{ color: "white" }}> {<Edit />} </ListItemIcon> <ListItemText primary={ "Suggest" } /> </ListItemButton> <ListItemButton sx={{ color: "white" }}> <ListItemIcon sx={{ color: "white" }}> {<Work />} </ListItemIcon> <ListItemText primary={ "Work with us" } /> </ListItemButton> <ListItemButton sx={{ color: "white" }}> <ListItemIcon sx={{ color: "white" }}> {<PermMedia />} </ListItemIcon> <ListItemText primary={ "Media" } /> </ListItemButton> <ListItemButton sx={{ color: "white" }}> <ListItemIcon sx={{ color: "white" }}> {<Feedback />}</ListItemIcon> <ListItemText primary={ "Contact us" } /> </ListItemButton> </List> <Typography sx={{ backgroundColor: "blue" , color: "white" , borderRadius: 10, textAlign: "center" , padding: 1, margin: 2, }} > Sign In </Typography> </div> ); return ( <div> <div> <Box sx={{ display: "flex" }}> <CssBaseline /> <AppBar position= "fixed" sx={{ width: { sm: `calc(100% - ${drawWidth}px)` }, ml: { sm: `${drawWidth}px` }, backgroundColor: "green" , }} > <Toolbar> <IconButton color= "inherit" edge= "start" onClick={handleToggle} sx={{ mr: 2, display: { sm: "none" } }} > <MenuIcon /> </IconButton> <Typography variant= "h6" > Welcome to w3wiki Write Portal </Typography> </Toolbar> </AppBar> <Box component= "nav" sx={{ width: { sm: drawWidth }, flexShrink: { sm: 0 } }} > <Drawer variant= "temporary" open={mobileViewOpen} onClose={handleToggle} ModalProps={{ keepMounted: true , }} sx={{ display: { xs: "block" , sm: "none" }, "& .MuiDrawer-paper" : { boxSizing: "border-box" , width: drawWidth, }, }} > {responsiveDrawer} </Drawer> <Drawer variant= "permanent" sx={{ display: { xs: "none" , sm: "block" }, "& .MuiDrawer-paper" : { boxSizing: "border-box" , width: drawWidth, }, }} open > {responsiveDrawer} </Drawer> </Box> <Box component= "main" sx={{ flexGrow: 1, p: 3, width: { sm: `calc(100% - ${drawWidth}px)` }, }} > <Toolbar /> <Typography paragraph> w3wiki provides Free Tutorials, Millions of Articles, Live, Online and Classroom Courses ,Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. It provides all the individuals with a ‘Contribute’ feature on their platform where they can come to write on a particular topic and share it with everyone and helps you to enhance your knowledge and expertise of particular subjects and allows you to showcase your research and writing skills to all others across the world. Not only this but you’ll also get rewarded for it in the form of remuneration, internship opportunities, discount offers, etc. </Typography> </Box> </Box> </div> </div> ); } export default App; |
Output:
Reference: https://mui.com/material-ui/react-drawer/
Contact Us