Tutorials

Creating Menu bar using React MUI v5

October 28, 2021

mui menu in react js

If you’re like me, you get excited by major new software releases and enjoy reading roundups of every new feature and UI tweak, comparing them to the previous version. With the release of Windows 11, Android 12, and iOS 15 this year (and last year’s macOS Big Sur), I’ve noticed quite a few similarities in the designs of the major operating systems. And in some cases, what appears to be convergence. These range from the use of outline icons to variable UI fonts and inset elements.

These similarities show that designers are coming up with new standards for digital user interfaces and offer hints as to where UIs are headed over the next decade and how the thinking behind UI design is shifting. I’m a front-end engineer at Rowy, and I recently redesigned its UI with the primary goal of improving the information-dense desktop experience. I also wanted to move away from the 2015-era, mobile-first Material Design we were following to something more modern and better complements the UIs we see today. The trends I noticed helped inform this redesign and will hopefully assist you when designing your apps.


  import React from 'react'  ;

  import {
    AppBar,
    Toolbar,
    IconButton,
    Typography,
    Button,
    Stack,
    Menu,
    MenuItem
  } from '@mui/material'


  function App() {

    return (
      <div>
      <AppBar position='static' color='info'>
        <Toolbar>
          <IconButton size='small'
          edge='start'
          color='inherit'
          aria-label='logo'>ICON</IconButton>
          <Typography variant='h6' component='div' sx={{ flexGrow: 1 }}>
            POKEMONAPP
          </Typography>
          <Stack direction='row' spacing={2}>
            <Button color='inherit'>Features</Button>
            <Button color='inherit'>Pricing</Button>
            <Button color='inherit'>About</Button>
            <Button color='inherit'>Login</Button>
          </Stack>

        </Toolbar>
      </AppBar>
      </div>
    );
  }

  export default App;