Responsive NavBar Using React Bootstrap

Published in

The Startup

5 min readJan 17, 2021

Traditionally, when websites came into existence, it can be assumed that people will be browsing it from a desktop computer. A lot has changed since then. With the multitude of devices with internet and web browsing capabilities, websites can now be viewed in different screen sizes and screen resolutions.

According to data published by Statista, mobile devices account for more than half of web traffic worldwide. And these numbers are expected to continue growing. With this in mind, some emerging digital markets have chosen to skip the desktop internet phase entirely and focus on mobile internet via smartphone and tablet devices.

With that said, it is crucial to build web apps that will render consistently across devices of different screen sizes. One key component in web apps that needs to automatically adapt to the user’s view port, is the Navigation Bar or NavBar. As the name suggests, it is the user’s guide around our website. Which is why it is important to make this component intuitive, effective, and most of all, responsive.

Unless you are some CSS guru, you could end up spending countless hours tinkering around to make your NavBar responsive across different devices. One quick solution that I have found very effective is the use of the front-end framework React Bootstrap. In the next few minutes, I will show you how I took advantage of this framework and saved myself valuable time when building web apps.

As per the title of this article, I will assume three things: 1) You have a basic understanding of React, 2) You have already gone through the initial setup of creating your project, and 3) You have already built the components you want to alternately render on the page. With that said, let’s get started.

First, let’s build functioning navigation routes. For this we are going to use another library built for React: React Router. So let’s install this dependency.

npm install react-router-dom

Then we are going to import Browser Router (aliased as Router) into our index.js file.

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

Still in our index.js file, we are going to wrap our App component with the Router component.

React.DOM.render(
    <Router>
        <App/>
    </Router>,
    document.getElementById('root')
);

Moving on to our App.js file, let’s import all the components we want to alternately render in our page. (For the purposes of this tutorial, I have created pages for these endangered animals: Panda, Gorilla, Rhino, and Sea Turtle.)

import Panda from './Components/Panda';
import Gorilla from './Components/Gorilla';
import Rhino from './Components/Rhino';
import SeaTurtle from './Components/SeaTurtle';
import Home from './Components/Home';

We’ll also need to import the Route and Switch components from React Router.

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

Now we can configure our route paths.

return (        
    <>            
          <Switch>                
             <Route path='/panda' component={Panda}/>  
             <Route path='/gorilla' component={Gorilla}/>               
             <Route path='/rhino' component={Rhino}/> 
             <Route path='/seaTurtle' component={SeaTurtle}/>  
             <Route path='/' component={Home}/>            
          </Switch>
    </>
);

Notice that we put the Home component last. We are making it the default of our switch cases. Or if you prefer it to be at the top of the list, you can add the exact prop on your Route component. It’s all a matter of preference.

<Route exact path='/' component={Home}/>

This would be a good time to check that our routing works, by typing the URLs we have specified. Going to http://localhost:3000/ should render our Home component, http://localhost:3000/panda should render our Panda component, and so forth. Once we have confirmed that the right components get rendered on the page with the corresponding paths, let’s create our NavBar component.

We are going to create a Navigation.js file where we are going to create a Navigation component. In this file, we’ll need to import the Navbar, Nav, and Container components form our React Bootstrap library.

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

Then we’ll use these components in the return statement of our Navigation component.

Now let’s talk a little bit about the components and some of the key props we used here. The Nav and Nav.Link components are pretty straight forward. The Navbar.Toggle, and Navbar.Collapse components that we wrapped around our Nav component, will collapse and expand our Nav content behind a button, when we are viewing the page in a small screen. In our Navbar component, the fixed=’top’ prop will position our NavBar affixed at the very top and make it scroll with the page. The collapseOnSelect prop will make the Navbar collapse automatically once the user selects an item from our Nav list (when the page is being viewed in a small screen).

If you want to dig deeper on these components, you can read more about them in the React Bootstrap docs.

With the Navigation component all configured, we can import it and have it rendered by our App component.