Navbar in React Bootstrap

This piece will be a continuation of my React Bootstrap article from previously. Once React Bootstrap is set up within your app, there are a number of components that can be implemented into your code. Today, we’re going to explore the Navbar component.

Many sites use a variation of this component (not necessarily from Bootstrap) for their navigation at the top of their pages. This of evert site you may run across in your daily searches, more often than not, theres a bar of navigable links arranged at the top. As always, we start with the documentation when building out new features from other sources. Here is what the documentation lays out as an example for the navbar.

So let’s break this down. The example above is broken into two sections, the top that shows the display of the navbar, the bottom is the physical code. The entire component is wrapped in the <Navbar> tags. The attributes in the topline tag will shape the overall look, such as the “bg” attribute will determine a light or dark style to your Navbar. The next line down focuses on the <Navbar.Brand> tag, which closes in the same line in the example above. The href attribute there is similar to other HTML tags attaching a link to other tags. The content between the tags is shown on the far left, in the traditional logo/home area on other navigation bars.

Quick note, the design of Bootstrap’s code requires capital letters where indicated. Otherwise, the code will not recognize Bootstrap’s component titles

The largest features to the bar falls into three categories in the example: links, dropdowns, and forms. Forms work similar to other forms using JavaScript, so we’ll stay focused on Links and Dropdowns

Links and Dropdowns

Both of these are wrapped in the <Nav> tags above. These are relatively straightforward, each link is a new item on the navigation bar moving across. In the example, the “home” and “link” items are listed by the <Nav.Link>. Just like the brand tags, the href works to link directly to the item in the bar. The dropdown component has some more features that get expanded out. ON the top level, we have the <NavDropdown> tag, which provides us the title attribute which will act as a psuedo-link allowing for a clickable dropdown menu with more links. Within the dropdown tags, they have their own Item tags, which supply our menu options, each can be linked as needed as well.