In this tutorial, we will create bottom navigation in react with material ui (mui 5). We will see mui 5 bottom navigation, bottom navigation with icon example with react material UI 5.
Install & Setup Vite + React + Typescript + MUI 5
To use material ui icons you need to install @mui/icons-material.
Install the package in your project directory with:
# with npm
npm install @mui/icons-material
# with yarn
yarn add @mui/icons-material
React Material UI 5 Bottom Navigation Example
1. Create react mui 5 simple bottom navigation using react-mui BottomNavigation component.
import * as React from 'react';
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import RestoreIcon from '@mui/icons-material/Restore';
import FavoriteIcon from '@mui/icons-material/Favorite';
import LocationOnIcon from '@mui/icons-material/LocationOn';
import { Box } from '@mui/material';
export default function SimpleBottomNavigation() {
const [value, setValue] = React.useState(0);
return (
<Box sx={{ width: 500 }}>
<BottomNavigation
showLabels
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
>
<BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
<BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
<BottomNavigationAction label="Nearby" icon={<LocationOnIcon />} />
</BottomNavigation>
</Box>
);
}
2. react mui 5 bottom navigation with no label.
import * as React from "react";
import BottomNavigation from "@mui/material/BottomNavigation";
import BottomNavigationAction from "@mui/material/BottomNavigationAction";
import FolderIcon from "@mui/icons-material/Folder";
import RestoreIcon from "@mui/icons-material/Restore";
import FavoriteIcon from "@mui/icons-material/Favorite";
import LocationOnIcon from "@mui/icons-material/LocationOn";
export default function LabelBottomNavigation() {
const [value, setValue] = React.useState("recents");
const handleChange = (event: React.SyntheticEvent, newValue: string) => {
setValue(newValue);
};
return (
<BottomNavigation sx={{ width: 500 }} value={value} onChange={handleChange}>
<BottomNavigationAction
label="Recents"
value="recents"
icon={<RestoreIcon />}
/>
<BottomNavigationAction
label="Favorites"
value="favorites"
icon={<FavoriteIcon />}
/>
<BottomNavigationAction
label="Nearby"
value="nearby"
icon={<LocationOnIcon />}
/>
<BottomNavigationAction
label="Folder"
value="folder"
icon={<FolderIcon />}
/>
</BottomNavigation>
);
}
3. react mui 5 bottom navigation with fixed positioning.
import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import BottomNavigation from '@mui/material/BottomNavigation';
import BottomNavigationAction from '@mui/material/BottomNavigationAction';
import RestoreIcon from '@mui/icons-material/Restore';
import FavoriteIcon from '@mui/icons-material/Favorite';
import ArchiveIcon from '@mui/icons-material/Archive';
import Paper from '@mui/material/Paper';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import ListItemText from '@mui/material/ListItemText';
import Avatar from '@mui/material/Avatar';
import { Box } from '@mui/material';
function refreshMessages(): MessageExample[] {
const getRandomInt = (max: number) => Math.floor(Math.random() * Math.floor(max));
return Array.from(new Array(50)).map(
() => messageExamples[getRandomInt(messageExamples.length)],
);
}
export default function FixedBottomNavigation() {
const [value, setValue] = React.useState(0);
const ref = React.useRef<HTMLDivElement>(null);
const [messages, setMessages] = React.useState(() => refreshMessages());
React.useEffect(() => {
(ref.current as HTMLDivElement).ownerDocument.body.scrollTop = 0;
setMessages(refreshMessages());
}, [value, setMessages]);
return (
<Box sx={{ pb: 7 }} ref={ref}>
<CssBaseline />
<List>
{messages.map(({ primary, secondary, person }, index) => (
<ListItem button key={index + person}>
<ListItemAvatar>
<Avatar alt="Profile Picture" src={person} />
</ListItemAvatar>
<ListItemText primary={primary} secondary={secondary} />
</ListItem>
))}
</List>
<Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
<BottomNavigation
showLabels
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
>
<BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
<BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
<BottomNavigationAction label="Archive" icon={<ArchiveIcon />} />
</BottomNavigation>
</Paper>
</Box>
);
}
interface MessageExample {
primary: string;
secondary: string;
person: string;
}
const messageExamples: readonly MessageExample[] = [
{
primary: 'Brunch this week?',
secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat",
person: 'https://mui.com/static/images/avatar/5.jpg',
},
{
primary: 'Birthday Gift',
secondary: `Do you have a suggestion for a good present for John on his work
anniversary. I am really confused & would love your thoughts on it.`,
person: 'https://mui.com/static/images/avatar/1.jpg',
},
{
primary: 'Recipe to try',
secondary: 'I am try out this new BBQ recipe, I think this might be amazing',
person: 'https://mui.com/static/images/avatar/2.jpg',
},
{
primary: 'Yes!',
secondary: 'I have the tickets to the ReactConf for this year.',
person: 'https://mui.com/static/images/avatar/3.jpg',
},
{
primary: "Doctor's Appointment",
secondary: 'My appointment for the doctor was rescheduled for next Saturday.',
person: 'https://mui.com/static/images/avatar/4.jpg',
},
{
primary: 'Discussion',
secondary: `Menus that are generated by the bottom app bar (such as a bottom
navigation drawer or overflow menu) open as bottom sheets at a higher elevation
than the bar.`,
person: 'https://mui.com/static/images/avatar/5.jpg',
},
{
primary: 'Summer BBQ',
secondary: `Who wants to have a cookout this weekend? I just got some furniture
for my backyard and would love to fire up the grill.`,
person: 'https://mui.com/static/images/avatar/1.jpg',
},
];
Related Posts
create a chat ui in react with mui 5
create a blog section in react mui 5
create a footer in react mui 5
create a responsive navbar in react with mui 5
react mui 5 search bar example
react mui 5 login page example
react mui 5 image list example
react mui 5 toggle switch example
react mui 5 registration form example
react mui 5 contact us page example
react mui 5 loading skeleton example
react mui 5 gradient button example
react mui 5 social media icons example
react mui 5 snackbar toast notification example
how to use autocomplete react mui 5
dynamically multiple input fields in react mui 5
how to use dropdown menu in react mui 5
how to use background image in react mui 5
how to use pricing table in react mui 5
how to use dark mode in react mui 5
how to use file upload in react mui 5
how to use sticky navbar in react mui 5
how to use box shadow in react mui 5
how to use multi step form in react mui 5
how to use loading button in react mui 5