How to create a React Bootstrap Navbar?

React bootstrap is a very handy and popular framework for using the bootstrap in React.js applications. Today we are going to create a react-bootstrap navbar example. In this example I will show you from a simplest navbar to a little bit complex one. So grab your keyboards and let’s get started.

Installing react-bootstrap

First thing first, we need to install react-bootstrap plugin along side with bootstrap in our react project. Assuming you already cloned a basic react template and you are ready to use your react.js project. So just open up the terminal and after navigating to project directory hit following command to install the required plugins.

npm install react-bootstrap bootstrap

Import bootstrap in your App Component

Once you are done installing the bootstrap and react-bootstrap plugin, you need to import bootstrap in your App.js file. This will make sure that you may use the bootstrap all along your react application. So add the following import line.

<strong>import</strong> 'bootstrap/dist/css/bootstrap.min.css';Code language: HTML, XML (xml)

Create a basic Navbar Component

Now let’s create our Navbar component which we will import later in our app. For this, you need to create a new file naming Navbar1.js. you may name any other which suits you best. We are using function components which will help easy component management. Now let’s write our Navbar code.

import React from "react";
import { Navbar, Nav, Form, FormControl, Button } from "react-bootstrap";
export default function Navbar1() {
  return (
    <Navbar bg="light" expand="md">
      <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
      <Navbar.Toggle aria-controls="basic-navbar-nav" />
      <Navbar.Collapse id="basic-navbar-nav">
        <Nav className="mr-auto">
          <Nav.Link href="#home">Home</Nav.Link>
          <Nav.Link href="#link">Link</Nav.Link>
        </Nav>       
      </Navbar.Collapse>
    </Navbar>
  );
}Code language: JavaScript (javascript)

Most of the code for the navbar is taken from the documentation of react-bootstrap. It is very similar to the bootstrap code of the Navbar.

Import Navbar in App.js

You can import that navbar in your app.js file like below

import React from "react";
import "./style.css";
import "bootstrap/dist/css/bootstrap.min.css";
import Navbar1 from "./Navbar1";
export default function App() {
  return (
    <div>
      <Navbar1 />
      <h1>React Bootstrap Navbar</h1>
      <p>
        This is a quick demonstration of react-Bootstrap usage and specially the
        Navbar
      </p>
    </div>
  );
}Code language: JavaScript (javascript)

If you want to see the real demo here is the link for stackblitz

Making Navbar Responsive by using Collapse

The first one is the expand=”md” attribute in the main <Navbar> tag. This will collapse your Navbar in screens lower then the medium screens. Next Thing to notice is the use of  <Navbar.Collapse/> Tag, Which will collapse all your navbar content placed under this tag. Nav tag is where we place our actual navigations, and we the form control is outside this nav area so that it this will be top right.

Adding a Form in Navbar

We can also place form inside our navigation bar easily. Let’s see how to do this by adding a inline form just like below.

 <Form inline>
    <FormControl type="text" placeholder="Search" className=" mr-sm-2" />
    <Button type="submit">Submit</Button>
  </Form>Code language: HTML, XML (xml)

Final Look

Here is the complete code with in bound xs screen demo