# mui-navbar

> ```bash npm i mui-navbar ```

Latest version **1.0.4** (published 2021-10-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install mui-navbar
pnpm add mui-navbar
yarn add mui-navbar
bun add mui-navbar
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2021-10-30 |
| First published | 2021-10-22 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 15.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alamin Howlader |
| Maintainers | dvlpralamin |

## Links

- npm: https://www.npmjs.com/package/mui-navbar
- npm.io page: https://npm.io/package/mui-navbar

## Recent versions

- 1.0.4 (latest) — 2021-10-30
- 1.0.3 — 2021-10-24
- 1.0.2 — 2021-10-24
- 1.0.1 — 2021-10-22
- 1.0.0 — 2021-10-22

## README

# Martial-ui responsive navbar

## Install

```bash
npm i mui-navbar
```

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

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

## Example
## [live demo](https://mui-navbar.netlify.app/)

```jsx
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 dvlpralamin@gmail.com

---
_Source: https://npm.io/package/mui-navbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._