navigation bar react.js code example

Example: react navigation bar

//create a diffrent directory to write down the code for navigation bar called 'navigation'
//should install react-bootstrap in react app
//call the file navigation from app.js
//this code will provode simple reactive navigation bar


//navigation.js code should look like
import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import { Nav, Navbar, NavDropdown } from "react-bootstrap";

class Navigation extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
        <Navbar.Brand href="#home">Amrit Bhusal</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="mr-auto">
            <Nav.Link href="#About me">About me</Nav.Link>
            <Nav.Link href="#Portofolio">Portofolio</Nav.Link>
            <Nav.Link href="#Contacts">Contacts</Nav.Link>
            <Nav.Link eventKey={2} href="#Resume">
              Resume
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}
export default Navigation;




//in app.js file your code should look like
import React from "react";
import NAVIGATION from "./navigation/navigation";
export default function App() {
  return (
    <div className="App">
      <NAVIGATION />
    </div>
  );
}