12

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

enter image description here

2) React Bootstrap Navbar

enter image description here

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

Rido
  • 717
  • 4
  • 10
  • 23

3 Answers3

4

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.

enter image description here

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:

Mohsen Taleb
  • 645
  • 5
  • 16
0

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.

Dragos
  • 46
  • 1
  • 6
-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>
Emil Karlsson
  • 1,000
  • 1
  • 7
  • 16