¿Cómo crear una barra de navegación con Material-UI?

Material UI es un marco de interfaz de usuario front-end para componentes React diseñado por Google. Está construido usando Less, que es una extensión de lenguaje compatible con versiones anteriores para CSS. Hemos utilizado el componente AppBar para crear una barra de navegación con Material-UI en ReactJS

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando.

  npx create-react-app foldername

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

  cd foldername

 

• Paso 3: después de crear la aplicación React.js, instale los módulos de material-UI con el siguiente comando.

  npm install @material-ui/core
  npm install @material-ui/icons

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: Cree un archivo Navbar.js donde crearemos nuestro propio componente Navbar usando la interfaz de usuario de material como se muestra a continuación.

Ejemplo:

// Importing files from Material-UI
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
  
// Using Inline Styling
const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
}));
  
// Exporting Default Navbar to the App.js File
export default function Navbar() {
  const classes = useStyles();
  
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar variant="dense">
          <IconButton edge="start" 
            className={classes.menuButton} 
            color="inherit" aria-label="menu">
              <MenuIcon />
          </IconButton>
          <Typography variant="h6" color="inherit">
            Geeks for Geeks
          </Typography>
        </Toolbar>
      </AppBar>
    </div>
  );
}

Después de crear el componente Navbar, lo importaremos a nuestro archivo App.js como se muestra a continuación.

// Importing the navbar component inside
// the main app file
import Navbar from "./components/Navbar";
  
const App = () =>{
  return (
    <>
      <Navbar/>         
    </>
  );
}
  
export default App;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida.

Demostración de la barra de navegación

Referencia: https://material-ui.com/components/app-bar/