React Bootstrap Navs

React Bootstrap supports a Nav component to provide a pre-customized layout for the navigations. It shares general styles and layouts with the component. We can swap variants to change the layout of the navigations.

Nav component is built using the flexbox to align the navigation items and build a strong foundation.

Let's create a basic navigation using the Nav component:

To create a styled navigation using the React Bootstrap, use the <Nav></Nav> component and define the <Nav.Item> within the <Nav> component.

Consider the below example:

App.js:

Output:

<Nav> component provides a very flexible container to align the navigation items. It can be customized by using the custom classes so we can use any elements to build the nav. By default the <Nav> and <Nav.Item> components render the <div> instead of <ul> and <li> which is not a good markup practice so we can use the as prop to render it as <ul> and <li>.

The above code will render the navigation links as <ul> and <li> elements. It will not affect the layout of the rendered links.

Alignment and Orientation of the Navigation Links

The Nav component is built with the flexbox so we can customize its orientation and alignment easily by adding few classes. For example, if we want to align it to the center we can simply pass the className="justify-content-center", it will align the navigation menu to the center of the nav container. Similarly, to position it at the end of the container we can use the justify-content-end class. By default, it is positioned at the start of the nav container.

Below is an example of the centered nav:

Output:

Vertical Navigation:

To align the navigation items vertically, we can use the flex-column class. It will align the nav items vertically.

Tabs using Nav

We can create the navigation menu as tabs by using the tabs variant. It will apply the style to the tab items and render them in tab styled layout. Consider the below example:

Output:

Nav Items as Pills

The pill variant allows us to render the navigation item in a pilled layout. It provides an improved visual layout.

Output:

Filling and Justifying the Nav

The fill prop allows us to fill and justify the navigation items. The fill prop forces the navigation items to extend the navigation items to full width. However, the navigation items are different sizes. We can use the fill prop to set the navigation item's width to the full of the container. To equally divide the space between items, we can pass the justify prop to the nav component.

Output:

Nav Dropdown

We can mix the dropdown component with nav link and nav item to create a dropdown menu.

Output:

Thus, we can use the nav component precisely to create a navigation menu with a pre-customized layout. We can also create a dropdown menu by mixing the dropdown component with the nav item.