Martial-ui responsive navbar

Install

npm i mui-navbar

this package have two dependency make sure install them otherwise it doesn't work.

npm i @mui/material @emotion/react @emotion/styled @mui/styles
npm i react-router-dom

Example

live demo

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router,Switch,Route } from "react-router-dom";
import { MuiNavbar, NavItem } from 'mui-navbar';
import Home from './components/Home';
import About from './components/About';
import Blog from './components/Blog';
import Contact from './components/Contact';
const App = () => {
  return (
      <Router>
        <MuiNavBar>
          <NavItem to="/">Home</NavItem>
          <NavItem to="/about">About</NavItem>
          <NavItem to="/Blog">Blog</NavItem>
          <NavItem to="/contact">Contact</NavItem>
        </MuiNavBar>

        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
          <Route exact path="/blog" component={Blog} />
          <Route exact path="/contact" component={Contact} />
        </Switch>
      <Router/>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

Props

maximum props are optional.
Below is the complete list of possible props and their options:

▶︎ indicates the default value if there's one

Props for MuiNavbar component

height: number ▶︎ 64
Set navbar height default size 64px.

background: string ▶︎ #1976D2
Set navbar background color default value material ui primary color.

navItemPosition: string ▶︎ right
Set navbar items position default value right.

logo: string ▶︎ null
Set navbar brand image default value null.

logoText: string ▶︎ null
Set navbar brand text default value null.

logoTextColor: string ▶︎ #ffffff
Set navbar brand color default value #ffffff.

togglerColor: string ▶︎ #ffffff
Set navbar toggler icon color default value #ffffff.

props for NavItem component

to: string ▶︎ '/'
Set react router path here as Link default value '/'

color: string ▶︎ #ffffff
Set navbar item color default value #ffffff.

fontWeight: number ▶︎ 500
Set fontWeight default value 500.

mx: number ▶︎ 5
Set horizontal margin default value 5px

my: number ▶︎ 0
Set vertical margin default value 0px

px: number ▶︎ 15
Set horizontal padding default value 5px

py: number ▶︎ 10
Set vertical padding default value 0px

If you like this package give your valuable feedback for improving this package. This is initial version so feel free to give feature request here [email protected]