Creating Responsive Navbar using React-Bootstrap

React is a JavaScript library for creating user interfaces based on UI components . And, Bootstrap is a CSS framework for creating responsive applications. Here, in this blog post we will discuss how to use Bootstrap in our React applications .

From the official guide

React-Bootstrap is a complete re-implementation of the Bootstrap components using React. It has no dependency on either bootstrap.js or jQuery.

First, let us create a new react project using the command:

npx create-react-app react_bootstrap_navbar


Then add few new components to the project. We will create a new folder called components and add three components: Home, About, Contact .

Now, we will be adding some content inside those three components .

const Home = () => {
    return (
        <h1>Home Page</h1>
    );
}

export default Home;

Similarly add some texts to About and Contact components .

In App.js file, let's import all three components.

function App() {
  return (
    <div className="App">
        <Home />
        <About />
        <Contact />
    </div>
  );
}

In order to install the React Bootstrap npm package we can simply go to terminal and use the command :

npm install react-bootstrap bootstrap@5.1.3

After that we need to import bootstrap.min.css file in index.js or App.js file .

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


We are now ready to use all the features of React Bootstrap .

Let us create a new component called Navigationbar.js and add the following code which will be responsible for creating our navbar .

)

Let's understand some of the components and props from the above code:

• Navbar component wraps the entire component .
• expand prop allows us to collapse the navbar at given breakpoint and we also need to add collapseOnSelect prop .
• Navbar.Toggle and Navbar.Collapse helps to get the mobile friendly navbar .
• collapseOnSelect prop works only if we add eventKey prop for NavLink item .

Now, we will install React Router library for building functioning navigation routes .

npm i react-router-dom@5.3.0

In App.js file, let us import BrowserRouter (aliased as Router) , Route and Switch from React Router .

import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';

Moving on to our App.js file, let's add corresponding routes to the components.

function App() {
  return (
    <div className="App">
        <Router>
            <Navigationbar />
            <Switch>
                <Route exact path='/' component={Home}/>
                <Route path='/about' component={About}/>
                <Route path='/about' component={Contact}/>
            </Switch>
        </Router>
    </div>
  );
}

Here we are using Switch component which will render our components only when path will be matched .

Here's how our navbar looks on the desktop screen :

This is how the navbar looks on small screen devices :

You can find the demo and source code here

Conclusion:

In this blog post we saw how to create responsive navigation bar using React-Bootstrap front end framework . I hope you enjoyed reading this blog post. Feel free to share your thoughts below. You can find me on Twitter for daily content regarding Web development.

Thanks for reading. Happy Coding !