Quick React Bootstrap NavBar
Tags: beginners, react, javascript
Published: 2020-01-23 02:15:36

---
title: Quick React Bootstrap NavBar
published: true
description: Implement React Bootstrap Navbar 
tags: beginners, react, javascript
cover_image: https://images.unsplash.com/photo-1524146128017-b9dd0bfd2778
---
React-bootstrap's documentation is incredibly helpful. Probably some of the best I've come across. However, as a newbie, getting to the point of implementation and testing can seem a little confusing at times. If you'd prefer to read the technical side without the introduction, skip to 'The Bar' section.

### The Need

My experience with designing user interfaces is quite small. Before [The Flatiron School](https://flatironschool.com/), at my job at an IT consulting firm, I created terminal/command prompt tools for mostly automation or limited user/technician interaction. While you can thoughtfully place prompts, colors (which quickly become too much.), and information, there aren't many options to make it a more desirable interaction.

In my previous projects, I dabbled with a bit of CSS. Putting bits of code together to make something like this:

![](https://thepracticaldev.s3.amazonaws.com/i/decf05i5kemb733znpf5.png)

And others to create more reactive star ratings like this:

![](https://thepracticaldev.s3.amazonaws.com/i/fpqf8mytvxip55n9tjen.gif)

My next attempt was using the [Bootstrap](https://getbootstrap.com/) gem to create a navbar:

![](https://thepracticaldev.s3.amazonaws.com/i/7itgfaemkwtfnbauncly.gif)

It was simple and served it's purpose entirely at the time.

For the latest attempt, I wanted a navbar that felt a little more fluid and enjoyable, especially since a user has to stare at it throughout the app. After trying other components with [React-Bootstrap](https://react-bootstrap.github.io/), it was an easy decision to give their styled navbar a try. Once implemented, following the documentation to fulfill your needs is rather simple. There are a plethora of options you can test and use to make a professional and attractive Navbar. So, on to the good part, how I quickly implemented it.

### The Bar

The Navbar component itself is simple and pretty much covered on the [Navbar documentation](https://react-bootstrap.github.io/components/navbar/). Here's the code I used for interest and reference:

```react
import React from 'react';
import { connect } from 'react-redux';
import { Navbar } from 'react-bootstrap';
import NavDropdown from 'react-bootstrap/NavDropdown'

const NavBar = () => {
  return (
    <Navbar bg="black" variant="dark" sticky="top">
      <Navbar.Brand>
      <img
        src="./logo.png"
        width="30"
        height="30"
        className="d-inline-block align-top"
        alt=" "></img>
      </Navbar.Brand>
        <NavDropdown bg="black" title="Menu" id="collasible-nav-dropdown" style={{ color: "#5299d3" }}>
        <NavDropdown.Item style={{ color: "#5299d3" }} href="/">Home</NavDropdown.Item>
        <NavDropdown.Item style={{ color: "#5299d3" }} href="/welcome">Admin</NavDropdown.Item>
        <NavDropdown.Item style={{ color: "#5299d3" }} href="/users">Users</NavDropdown.Item>
        <NavDropdown.Item style={{ color: "#5299d3" }} href="/lessons">Lessons</NavDropdown.Item>
        <NavDropdown.Item style={{ color: "#5299d3" }} href="/challenges">Challenges</NavDropdown.Item>
      </NavDropdown>    
    </Navbar>
  );
};
```

export default connect()(NavBar);

To import the component, it's as you would expect in a React app: `import NavBar from './components/Navbar';`

Which I included in the `App.js` component, which is where I also implemented react-router-dom to route the component pages: `import { BrowserRouter as Router, Route} from 'react-router-dom'`

Integrating the navbar into the rest of the components threw me off a bit. Ultimately I found the simplest was also the best solution (Other routes replaced with '...' for presentation purposes): 

![](https://thepracticaldev.s3.amazonaws.com/i/z0wife6j2u3q6owzmi3n.png)


### Conclusion

With this navbar version, I was able to add a simple logo, dropdown menu, and the app's universal font I previously chose. While I decided to have the navbar remain at the top as the user scrolls, the transparency keeps the fluid aesthetic across the app.



### Attribution
Cover Photo by [Alexander Andrews](https://unsplash.com/@alex_andrews?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)