Create Navbar using React

Any kind of Feedback is welcome, thanks and I hope you enjoy the article.🤗

If you have ever tried to create a navigation bar (NavBar) when creating a website using react, then you must have ran into this problem. You do not know how to make it responsive or the hamburger menu does not work.

GIF

Problem

You see unlike when using HTML, CSS, JavaScript and Bootstrap to create a website. In React, the script tag is not available to use. However, in this article, we will look at a way to resolve that.

React-Bootstrap

There is a package that can resolve that for you. It is called React-Bootstrap. According to the docs, it says that:

React-Bootstrap is a component-based library that provides native Bootstrap components as pure React components.

This means you can use bootstrap options such as button, modal, NavBar and many more as if they were real React components.

Installation

To install the package, you use the npm command.

npm install react-bootstrap@2.0.3

GIF

How to use

In your React functional component, we import the bootstrap component we want to use.

import { Container, Nav, Navbar } from "react-bootstrap"

Now, we can create our Navbar from the components

const Navigation = () => {



    return (

        <Navbar bg="primary" variant="dark" expand="lg" sticky="top" className="myNavBar">
            <Container>
                <Navbar.Brand href="#home">Welcome</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="ms-auto">
                        <NavLink to="/" className="navLink" style={({ isActive }) => {
                            return {
                                color: isActive ? "red" : "white"
                            }
                        }}
                        >Home</NavLink>
                    </Nav>
                    <button className="navLink btn btn-primary logOut">Log Out</button>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    )
}

export default Navigation

styling

we can style each nav-link item, using external css.

.navLink{
  margin-left: 24px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  transition: all 0.4s ease;
  text-decoration: none;
}

Navbar background color

There are many ways to change the color of Bootstrap Navbar components and using CSS is one of them

<Navbar bg="primary" variant="dark" expand="lg" sticky="top" className="myNavBar" style={{backgroundColor: "#eee"}}>

</Navbar>

Thank you, please follow me