Simple Responsive Navbar Using React Bootstrap

Navbar is one of the most important parts of any website. It’s like a map of the website where any users whether they know about web development or not, should be able to navigate through without any difficulties.

Though designing a perfect responsive Navbar might be tricky with just plain CSS & JS. So, today I’ll show you how can you not only create an attractive but responsive navbar using React Bootstrap.

If you’ve ever used Bootstrap Framework or not you’ll not have any issues as I will be explaining every bit & piece here, so beginners don’t have to worry about anything.

What is Bootstrap?

Bootstrap is the most popular front-end framework, which helps to build design-centric and mobile-friendly websites super fast. Bootstrap has many built-in components which speed up the development process.

What is React-Bootstrap?

React Bootstrap is a React UI Components Library, it uses all of the Bootstrap 4 components and is one of the oldest React UI libraries. Unlike Bootstrap, React Bootstrap doesn’t use JQuery, they are built as independent React Components.

Ok, now without any further ado, let’s get started.

Note: Scroll to the end to get the sandbox link

Navbar Using React-Bootstrap –

Before starting, let’s set up our React Environment and install the required packages. If you know how to create a react app then you know the drill, let’s begin.

Quick Setup –

if you want to avoid any of this local setup which might take a little while, create your new react project in a snap at codesandbox.io.

Here we’ve created a new react app and moved over to it.

We’ll need these two packages to make react-bootstrap work properly.

• bootstrap
• react-bootstrap

File Structure

• React-Navbar(main directory)
  • components
    • Navbar.jsx
    • Navbar.css
  • App.js

#Step 1 – Import React Bootstrap Styles & Components –

Inside App.js add styles import mentioned below,

import "bootstrap/dist/css/bootstrap.min.css";

This is default bootstrap CSS and you only have to do it once.

Now, inside Navbar.jsx add this lines of code,

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

here we are importing custom UI components from React Bootstrap.

#Step 2 – Create a Navbar Component –

Paste this code inside Navbar.jsx component.

import "./Navbar.css";
function Header() {
  return (
    <Navbar className="navbar" bg="dark" expand="lg" variant="dark">
      <Container className="navbar-container">
        <Navbar.Brand href="#home">
          <img
            alt=""
            src="https://image.flaticon.com/icons/png/512/831/831292.png"
            width="60"
            height="60"
            className="d-inline-block align-top brand-logo"
          />
          {""}
          <h1 className="brand-text">Brand</h1>
        </Navbar.Brand>

        <Navbar.Toggle />
        <Navbar.Collapse collapseOnSelect>
          <Nav
            className="me-auto nav-links justify-content-end"
            style={{ width: "100%" }}
          >
            <Nav.Link href="" className="nav-link">Products</Nav.Link>
            <Nav.Link href="" className="nav-link">Services</Nav.Link>
            <Nav.Link href="" className="nav-link">About</Nav.Link>
            <Nav.Link href="" className="nav-link">Contact</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
}

export default Header;

Also Checkout –
Simple Navbar Using Bootstrap 5

Here, we are using 3 major React Bootstrap components Container, Navbar & Nav.

1. Navbar – Navbar Component creates a navbar instance and will make sure everything we write inside will be at the top of the web page.
2. Container – Container is a layout component, just like div, but it has its styles and max-width.
3. Nav – Nav Component handles all the other elements which are going to be in the navbar, like the Search button or navigation links, etc.

There are also sub-components of these which helps in making a perfect overall responsive navbar.

1. Navbar.Brand – It defines the logo area of the Navbar, like the logo image or text, which here we’ve used both.
2. Navbar.Toggle – This is a self-closing component, it just initializes the responsiveness and creates a toggle button whenever on small devices. Where you use it is important, here we’ve used it just before Navbar.Collapse.
3. Navbar.Collapse – Everything inside this component will be collapsible. Here we’ve Nav component and it will collapse on a certain break-point, making it fully responsive.

Note: you can define your break-point manually in Navbar Component, with attribute expand="lg"

1. Nav.Link – This will just define that everything in the component is a navigation link.

Navbar CSS –

Paste this styles inside Navbar.css to slightly enhance the navbar,

.brand-text {
  margin-left: 4rem;
  margin-top: -3.2rem;
  font-weight: 700;
}
.nav-link {
  margin: 20px;
  text-align: center;
  border: 2px solid transparent;
  border-radius: 1rem;
}
.nav-link:hover,
.nav-link:focus {
  background-color: #fefefe;
  color: #212529 !important;
  border-radius: 1rem;
}

#Step 3 – Import in App Component –

Now as we’ve finished with the Navbar component, let’s import it inside to see the result. Copy and paste the below code inside App.js,

import React from "react";

import Header from "./components/Navbar";

import "bootstrap/dist/css/bootstrap.min.css";
import "./styles.css";

export default function App() {
  return (
    <div fluid className="App">
      <Header />
    </div>
  );
}

View Navbar and Complete Source Code.

I hope this post was helpful, if it was share it with your friends. Also, make sure to subscribe to our newsletter to never miss interesting content on web development.