Responsive NavBar Using React Bootstrap

Roy Flores
Jan 17 · 5 min read
image source: digitaltrends

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.

Here’s how our web app’s navigation will look like on a desktop screen:

And on a mobile screen:

So there you have it. A quick and easy way to create a responsive NavBar in our React App using the React Bootstrap front-end framework.

The Startup

Get smarter at building your thing. Join The Startup’s +787K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Roy Flores

Written by

Theatre artist turned Software Engineer 🤓

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store