Example code for implement Navigation component:

1import React from 'react';
2import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
3import Home from './pages/Home';
4import About from './pages/About';
5import Blog from './pages/Blog';
6import Contact from './pages/Contact';
7import Navigation from './component/Navigation';
8

9const App = () => {
10  return (
11      <Router>
12        <Navigation/> // here place your Navbar component
13        <Switch>
14          <Route exact path='/' component={Home} />
15          <Route exact path='/about' component={About} />
16          <Route exact path='/blog' component={Blog} />
17          <Route exact path='/contact' component={Contact} />
18        </Switch>
19      </Router>
20  );
21};
22

23export default App;

No props example code:

1import React from 'react';
2import { MuiNavbar, NavItem } from 'mui-navbar';
3

4const Navigation = () => {
5  return (
6    <MuiNavbar>
7        <NavItem to="/home">Home</NavItem>
8        <NavItem to="/about">About</NavItem>
9        <NavItem to="/Blog">Blog</NavItem>
10        <NavItem to="/contact">Contact</NavItem>
11    </MuiNavbar>
12  );
13};
14

15export default Navigation;

Different props example code:

1import React from 'react';
2import { MuiNavbar, NavItem } from 'mui-navbar';
3

4const Navigation = () => {
5    return (
6        <MuiNavbar
7            logoText="Mui Navbar"
8            background="#07cdff"
9            navItemPosition="left"
10        >
11            <NavItem to="/home">Home</NavItem>
12            <NavItem to="/about">About</NavItem>
13            <NavItem to="/Blog">Blog</NavItem>
14            <NavItem to="/contact">Contact</NavItem>
15        </MuiNavbar>
16    );
17};
18

19export default Navigation;

Gradient bg example code:

1import React from 'react';
2import { MuiNavbar, NavItem } from 'mui-navbar';
3

4const Navigation = () => {
5    return (
6        <MuiNavbar
7            logoText="Mui Navbar"
8            background="linear-gradient(180deg, #19D3AE,#0FCFEC)"
9        >
10            <NavItem to="/home">Home</NavItem>
11            <NavItem to="/about">About</NavItem>
12            <NavItem to="/Blog">Blog</NavItem>
13            <NavItem to="/contact">Contact</NavItem>
14        </MuiNavbar>
15    );
16};
17

18export default Navigation;