DEV Community

Cover image for Create Navbar using React
Ifeanyi Chima
Ifeanyi Chima

Posted on • Updated on

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.

Image description

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
Enter fullscreen mode Exit fullscreen mode

Image description

How to use

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

import { Container, Nav, Navbar } from "react-bootstrap"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Buy Me A Coffee

Thank you, please follow me

HTML GitHub

Top comments (0)