Kimaru Thagana

Pull React-Bootstrap Navbar Components to the Right

Kimaru Thagana

Oct 31, 2020
5 Min read
25,784 Views

Oct 31, 2020
5 Min read
25,784 Views

Web Development

Client-side Frameworks

React

Front End Web Development

Introduction

In frontend development, React developers have to build user interfaces (UI) with user experience (UX) in mind. Navigation is a critical element of web pages because it provides a means for users to traverse content. To implement navigation, most frontend developers use navigation bars, which are naturally placed at the top of the web page for visibility and navigation. For an even better user experience, some web pages freeze the navbar in a fixed position or pulled in a certain direction optimal for page navigation. Navigation bars can hold a logo, banner, or menu items, as well as providing a seamless user experience within a web page.

Scenario

As a budding React developer, you may come across a scenario in which you need to style a navbar component in a certain way. One way is to position or pull navbar components to the right of your webpage. In this guide, you will learn a simple yet effective way to position your items in a navbar component using react-bootstrap, a popular framework for React. This guide therefore assumes that you have at least beginner knowledge in React.js and have interacted with React Bootstrap.

Set up a Sample App

Open your terminal and run these commands to create a basic React app.

1npx create-react-app react-bootstrap-navbar_right
2
3cd  react-bootstrap-navbar_right
4
5npm start

bash

Include react-bootstrap in your basic React app.

1npm install react-bootstrap bootstrap

bash

Delete the code in the newly created App.js file and paste the sample code below.

1import React, {Component} from 'react';
2
3class App extends Component{
4    constructor(props) {
5        super(props);
6        
7    }
8
9    render() {
10        return (
11            <div>
12                
13            </div>
14        );
15    }
16
17}

In your app.js file, include the stylesheet as well.

1import 'bootstrap/dist/css/bootstrap.min.css';

You can now import bootstrap components, for example:

1import { Navbar } from 'react-bootstrap';

Set Up the Navbar

The sample code below sets up a basic navbar component from react-bootstrap. In this case, you have links that showcase how to position it to either the right or left. At first, all links are positioned to the left as default.

1import React, {Component} from 'react';
2import 'bootstrap/dist/css/bootstrap.min.css';
3import {Nav,  Navbar, NavDropdown } from 'react-bootstrap';
4
5class App extends Component{
6    constructor(props) {
7        super(props);
8
9    }
10
11    render() {
12        return (
13            <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
14                <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
15                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
16                <Navbar.Collapse id="responsive-navbar-nav">
17                    <Nav>
18                        <Nav.Link href="#features">Features</Nav.Link>
19                        <Nav.Link href="#pricing">Pricing</Nav.Link>
20                        <Nav.Link href="#deets">More details</Nav.Link>
21                        <Nav.Link eventKey={2} href="#memes">
22                            Good stuff
23                        </Nav.Link>
24                    </Nav>
25                </Navbar.Collapse>
26            </Navbar>
27        );
28    }
29
30}
31export default App;

In Bootstrap 4, the classes .pull-right and .pull-left are replaced by .float-right and float-left. Unfortunately, if you have gone down this path before, you'll quickly realize that these don't work with react-bootstrap. What works in this case is auto margins, specifically .mr-auto to push right and ml.auto to push left.

Go ahead and add the class below in your nav tag.

1<Nav className="ml-auto">

Here's how your code should look.

1import React, {Component} from 'react';
2import 'bootstrap/dist/css/bootstrap.min.css';
3import {Nav,  Navbar, NavDropdown } from 'react-bootstrap';
4
5class App extends Component{
6    constructor(props) {
7        super(props);
8
9    }
10
11    render() {
12        return (
13            <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
14                <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
15                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
16                <Navbar.Collapse id="responsive-navbar-nav">
17                    <Nav className="ml-auto">
18                        <Nav.Link href="#features">Features</Nav.Link>
19                        <Nav.Link href="#pricing">Pricing</Nav.Link>
20                        <Nav.Link href="#deets">More details</Nav.Link>
21                        <Nav.Link eventKey={2} href="#memes">
22                            Good stuff
23                        </Nav.Link>
24                    </Nav>
25                </Navbar.Collapse>
26            </Navbar>
27        );
28    }
29
30}
31export default App;

Conclusion

Working with navbars is a paramount skill in frontend development . You can further build on this guide by learning more navbar properties from the official React Bootstrap site.

LEARN MORE