Is default navbar on Material UI exist like Bootstrap does?

Question

I found it hard to create navbar with menus on Material UI. I've read it's AppBar documentation. But, it seems they doesn't provide that feature.

1) Material UI AppBar

2) React Bootstrap Navbar

How to create navbar menu on Material UI like React Bootstrap does ?

Answer 1

An AppBar is more or less just a container for other components. It doesn't do much on its own. What I think you want is to add a menu to you AppBar (or, more specifically, to the Toolbar inside of the AppBar):

https://material-ui.com/components/menus/

You can also add regular Buttons:

https://material-ui.com/components/buttons/

A simplified example:

      <AppBar>
        <Toolbar>
          <Menu>
            <MenuItem>An item</MenuItem>
            <MenuItem>Another item</MenuItem>
          </Menu>
          <Button>A button</Button>
        </Toolbar>
      </AppBar>

Answer 2

Unfortunately, Material-UI doesn't provide a navbar component like Bootstrap does. (It does have an appbar though, but I don't think that's what you're looking for). Also, it doesn't give you the automatic responsiveness out-of-the-box like bootstrap. It just gives you the tools so you have to take care of it yourself.

A navbar, however can be composed using some basic MUI components with flex:

import React from "react";
import "./styles.css";
import { Box, Typography, Button, IconButton } from "@material-ui/core";
import MenuIcon from "@material-ui/icons/Menu";

export default function App() {
  return (
    <Box display="flex" bgcolor="grey.200" p={2} alignItems="center">
      <Typography>React-bootstrap</Typography>
      <Box>
        <Button color="primary">Link</Button>
        <Button color="primary">Link</Button>
      </Box>
      <Box flexGrow={1} textAlign="right">
        <IconButton>
          <MenuIcon />
        </IconButton>
      </Box>
    </Box>
  );
}

Here's the live demo:

Answer 3

You need to use the appbar (https://mui.com/components/app-bar/) component with something like the drawer component (https://mui.com/components/drawers/).

Apparently this 'atomic' approach is what MUI proposes to us (configure the building blocks and make your own components). I struggled a bit with grasping this component as well but I m starting to get the hang of it.