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

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: