Create Navbar using React
Tags: webdev, beginners, tutorial, programming
Published: 2022-11-02 19:22:16

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktoc35071zlw1p05r6rj.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](https://react-bootstrap.github.io/), 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.

```javascript
npm install react-bootstrap@2.0.3
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uhmkyh7s5se4ww1ryn3m.gif)

### How to use

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

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

Now, we can create our Navbar from the components

```javascript

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.

```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

```javascript

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

</Navbar>

```


<a href="https://www.buymeacoffee.com/ifeanyichima" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>


**Thank you, please follow me**

[![HTML](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white)](https://linkedin.com/ifeanyi-thankgod-chima)&nbsp;[![GitHub](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)](https://github.com/masterifeanyi)