How to create mui appbar on bottom in react js?

Hi Friends 👋,

Welcome To aGuideHub!

To create mui appbar on bottom in React js, you can use this code <BottomNavigation>. It will create mui appbar on bottom in react js.

Today, I am going to show you, how to create mui appbar on bottom in react js.


Install the following packages to use mui AppBar in react js.


npm install @mui/material @emotion/react @emotion/styled


yarn add @mui/material @emotion/react @emotion/styled

Table of contents

  • Install MUI and create a new React app.
  • Import Material-UI AppBar.
  • Customizing the AppBar.

Step 1: Install MUI and create a new React app.

First you have to install the React project. You should use create-react-app command to create a new React project.

npx create-react-app my-app
cd my-app
npm start

Step 2: Import Material-UI AppBar.

After installing MUI, you have to import your React component. To do this, add the following line to the top of your component file.

import React from 'react';
import { AppBar, Toolbar, Typography } from '@mui/material';

Step 3: Customizing the AppBar.

You can use the AppBar component in your react js. For example, The AppBar component is used to create a top app bar that contains navigation. You can use this <BottomNavigation> and show your appbar on botton in react js.

  onChange={(event, newValue) => {

MUI material create mui appbar on bottom example.

The below code is an example, to create mui appbar on bottom, you need to import AppBar Component. You can use <BottomNavigation> and it will create mui appbar on bottom in react js.


import * as React from 'react';
import Box from '@mui/material/Box';
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';

function refreshMessages() {
  const getRandomInt = (max) => 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(null);
  const [messages, setMessages] = React.useState(() => refreshMessages());

  React.useEffect(() => {
    ref.current.ownerDocument.body.scrollTop = 0;
  }, [value, setMessages]);

  return (
    <Box sx={{ pb: 7 }} ref={ref}>
      <CssBaseline />
        {{ primary, secondary, person }, index) => (
          <ListItem button key={index + person}>
              <Avatar alt="Profile Picture" src={person} />
            <ListItemText primary={primary} secondary={secondary} />
      <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0 }} elevation={3}>
          onChange={(event, newValue) => {
          <BottomNavigationAction label="Recents" icon={<RestoreIcon />} />
          <BottomNavigationAction label="Favorites" icon={<FavoriteIcon />} />
          <BottomNavigationAction label="Archive" icon={<ArchiveIcon />} />

const messageExamples = [
    primary: 'Brunch this week?',
    secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat",
    person: '/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: '/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: '/static/images/avatar/2.jpg',
    primary: 'Yes!',
    secondary: 'I have the tickets to the ReactConf for this year.',
    person: '/static/images/avatar/3.jpg',
    primary: "Doctor's Appointment",
    secondary: 'My appointment for the doctor was rescheduled for next Saturday.',
    person: '/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: '/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: '/static/images/avatar/1.jpg',

In the above code example, I have used the @mui/material component and created mui appbar on bottom in react js.

Check the output of the above code example.

React, Mui, appbar, on, bottom

Here, we are provided code sandbox links for the above program create mui appbar on bottom in react js. Then you can use whenever you want and do the changes as per your requirements.

Try it Yourself

All the best 👍

Premium Content

You can get all the below premium content directly in your mail when you subscribe us


Interview Questions

Soon You will get CSS, JavaScript, React Js, and TypeScript So Subscribe to it.

Portfolio Template

View | Get Source Code

Cheat Sheets

Cheat Sheets Books are basically Important useful notes which we use in our day-to-day life.

Related Posts