Pull React-Bootstrap Navbar Components to the Right

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.

Oct 31, 2020 • 5 Minute Read

Subscribe to the newsletter

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.

      npx create-react-app react-bootstrap-navbar_right

cd  react-bootstrap-navbar_right

npm start

Include react-bootstrap in your basic React app.

      npm install react-bootstrap bootstrap

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

      import React, {Component} from 'react';

class App extends Component{
    constructor(props) {
        super(props);
        
    }

    render() {
        return (
            <div>
                
            </div>
        );
    }

}
    

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

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

You can now import bootstrap components, for example:

      import { 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.

      import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Nav,  Navbar, NavDropdown } from 'react-bootstrap';

class App extends Component{
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
                <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav>
                        <Nav.Link href="#features">Features</Nav.Link>
                        <Nav.Link href="#pricing">Pricing</Nav.Link>
                        <Nav.Link href="#deets">More details</Nav.Link>
                        <Nav.Link eventKey={2} href="#memes">
                            Good stuff
                        </Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        );
    }

}
export 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.

      <Nav className="ml-auto">

Here's how your code should look.

      import React, {Component} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Nav,  Navbar, NavDropdown } from 'react-bootstrap';

class App extends Component{
    constructor(props) {
        super(props);

    }

    render() {
        return (
            <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
                <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                <Navbar.Toggle aria-controls="responsive-navbar-nav" />
                <Navbar.Collapse id="responsive-navbar-nav">
                    <Nav className="ml-auto">
                        <Nav.Link href="#features">Features</Nav.Link>
                        <Nav.Link href="#pricing">Pricing</Nav.Link>
                        <Nav.Link href="#deets">More details</Nav.Link>
                        <Nav.Link eventKey={2} href="#memes">
                            Good stuff
                        </Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        );
    }

}
export 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.