React bootstrap Navbar: How to right align a navbar item

Question

I'm trying to right align a navbar item (Contribute) within a navbar.js but I can't seem to figure it out. The navbar is a React component and looks like the following,

navbar.js here

import React, {PropTypes} from 'react';
import { Link, IndexLink } from 'react-router';
import { browserHistory, Router, Route } from 'react-router'
var ReactDOM = require('react-dom');

// create classes
var NavBar = React.createClass({
  render: function(){
    return(
      <nav className="navbar navbar-inverse navbar-static-top">
        <div className="container-fluid">
          <div className="navbar-header">
            <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
              <span className="sr-only">Toggle navigation</span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
              <span className="icon-bar"></span>
            </button>
            <NavBrand linkTo={this.props.brand.linkTo} text={this.props.brand.text} />
          </div>
          <div className="collapse navbar-collapse" id="navbar-collapse">
            <NavMenu links={this.props.links} />
          </div>
        </div>
      </nav>
    );
  }
});

var NavBrand = React.createClass({
  render: function(){
    return (
      <Link to={ this.props.linkTo }>
        <span className="navbar-brand">{this.props.text}</span>
      </Link>
    );
  }
});

var NavMenu = React.createClass({
  render: function(){
    var links = this.props.links.map(function(link){
      if(link.dropdown) {
        return (
          <NavLinkDropdown key={link.text} links={link.links} text={link.text} active={link.active} />
        );
      }
      else {
        return (
          <NavLink key={link.text} linkTo={link.linkTo} text={link.text} active={link.active} />
        );
      }
    });
    return (
      <ul className="nav navbar-nav">
        {links}
      </ul>
    );
  }
});

var NavLinkDropdown = React.createClass({
  render: function(){
    var active = false;
    var links = this.props.links.map(function(link){
      if(link.active){
        active = true;
      }
      return (

        <NavLink key={link.text} linkTo={link.linkTo} text={link.text} active={link.active} />

      );
    });
    return (
      <ul className="nav navbar-nav navbar-right">
      <li className={"dropdown" + (active ? "active" : "")}>
        <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
          {this.props.text}
          <span className="caret"></span>
        </a>
        <ul className="dropdown-menu">
          {links}
        </ul>
      </li>
      </ul>

    );
  }
});

var NavLink = React.createClass({
  render: function(){
    return(
      <li className={(this.props.active ? "active" : "")}>
        {/*<a href={this.props.linkTo}>{this.props.text}</a>*/}
        <Link to={ this.props.linkTo }>
          <span className="NavLink">{this.props.text}</span>
        </Link>
      </li>
    );
  }
});

module.exports = NavBar;

Presently, my navbar looks like the following,

would you expect the order to remain the same, and the brand to stay left aligned? or are you looking for a "right-to-left" style solution? — haxxxton, Feb 18 '17 at 05:14
I was trying with ml-auto, it didn't work for me. https://stackoverflow.com/a/65562241/8287187 This helped me out. Long story Short, use ms-auto if ml-auto is not working. — amit singh, Jun 25 '21 at 06:11

score 40 · Answer 1 · answered Sep 26 '19 at 20:50

40

The best and easiest approach which works is to add following class to the NAV node like following:

<Nav className="ml-auto">

Unfortunately adding "pullRight" wasn't the solution and it won't work.

answered Sep 26 '19 at 20:50

Hooman

1,775
1
16
15

After so many tries and hacking, this single liner saved me. This works! – Souvik Ghosh Nov 12 '20 at 03:35
Thank you so much for this single line of code! Hahaha helped out a headache – CleverOscar Jul 25 '21 at 21:45
1

It doesn't work :( – Sweet Caramel Oct 26 '21 at 17:36

score 23 · Answer 2 · answered Mar 28 '19 at 07:50

23

This one works for me

<Navbar>
    <Navbar.Brand href="/">MyBrand</Navbar.Brand>
    <Navbar.Toggle />
    <Navbar.Collapse>
        <Nav className="justify-content-end" style={{ width: "100%" }}>
            ...
        </Nav>
    </Navbar.Collapse>
</Navbar>

answered Mar 28 '19 at 07:50

Vladimir Vlasov

1,860
3
25
38

My problem with this one is it doesn't seem to work with two
elements, the second one just goes next to the first one regardless of whatever alignment style class I'm using
– kugo2006 Mar 30 '22 at 05:30

score 20 · Answer 3 · answered Jul 18 '21 at 22:51

20

The other way you could do it is:

<Nav className="ms-auto">

Unfortunately adding "pullRight" wasn't the solution and it won't work.

answered Jul 18 '21 at 22:51

Jameson Githinji

367
1
4
7

score 8 · Answer 4 · answered Mar 02 '20 at 06:59

If you want to make your navigation look something like as shown in below screen shot:

Then you would need to apply the class container-fluid on Nav and class ml-auto on the Nav.Item on the navigation item which you wish to right align.

Below is the code:

<Navbar bg="dark" variant="dark">
  <Nav className="container-fluid">
    <Nav.Item>
      <Navbar.Brand as={Link} to="/">Demo App</Navbar.Brand>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link as={Link} to="/user-list">User List</Nav.Link>
    </Nav.Item>
    <Nav.Item>
      <Nav.Link onClick={handleClickUserLogOut}>Log Out</Nav.Link>
    </Nav.Item>
    <Nav.Item className="ml-auto">
      <Nav.Link>Hi fname lname!</Nav.Link>
    </Nav.Item>
  </Nav>
</Navbar>

Does not work as of 8/30/21, all items are evenly spread out across the navbar after copy-pasting the exact code. — Anonymous Noob, Aug 30 '21 at 10:22

score 7 · Answer 5 · answered Oct 12 '21 at 07:33

7

For those with version 5 of bootstrap, we have to use ms-auto instead of ml-auto because there has been migration and changes in the class name.

.ml-* and .mr-* to .ms-* and .me-*

answered Oct 12 '21 at 07:33

Ahmad Zia yousufi

93
1
4

score 6 · Answer 6 · edited Oct 26 '21 at 20:18

6

In Bootstrap 5 you can use use ms-auto instead of ml-auto or mr-auto

edited Oct 26 '21 at 20:18

metodribic

1,561
17
27

answered Oct 26 '21 at 14:34

Ayush Jha

61
1
1

score 3 · Answer 7 · answered Oct 04 '21 at 15:03

This is working for me on version - 'v2.0.0-rc.0 (Bootstrap 5.1)'

<Nav className='ms-auto'>

complete,

<Navbar.Collapse id='basic-navbar-nav'>
    <Nav className='ms-auto'>
        <Nav.Link href='/cart'>Cart</Nav.Link>
        <Nav.Link href='/login'>Sign In</Nav.Link>
    </Nav>
</Navbar.Collapse>

score 2 · Answer 8 · answered Feb 18 '17 at 05:18

2

use the class navbar-right the reach what you want

answered Feb 18 '17 at 05:18

andrepaulo

816
11
24

score 1 · Accepted Answer · answered Feb 19 '17 at 01:39

The below code solved my issue of alignment.

var NavMenu = React.createClass({
  render: function(){
    var links = this.props.links.reduce(function(acc, current){      
      current.dropdown ? acc.rightNav.push(current) : acc.leftNav.push(current);
      return acc;
    }, { leftNav: [], rightNav: [] });
    return (
      <div>
        <ul className="nav navbar-nav">
          {links.leftNav.map( function(link) {
            return <NavLink key={link.text} linkTo={link.linkTo} text={link.text} active={link.active} />
          })}
        </ul>
        {
          links.rightNav.length > 0 ?
            <ul className="nav navbar-nav navbar-right">
              {
                links.rightNav.map( function(link) {
                  return <NavLinkDropdown key={link.text} links={link.links} text={link.text} active={link.active} />
                })
              }
            </ul> : false
        }
      </div>
    );
  }
});

score 1 · Answer 10 · answered May 10 '22 at 10:39

So far, I've discovered an easier way to do it from their official documentation, though it may be a little unconventional.

Here's the code

<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
  <Container>
  <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  <Navbar.Toggle aria-controls="responsive-navbar-nav" />
  <Navbar.Collapse id="responsive-navbar-nav">
{/*This totally empty navbar with the class 'me-auto' is significant. */}
    <Nav className="me-auto">
    </Nav>
{/*It is responsible for the other nav bar content moving to the right.*/}
    <Nav>
      <Nav.Link href="#deets">More deets</Nav.Link>
      <Nav.Link eventKey={2} href="#memes">
        Dank memes
      </Nav.Link>
    </Nav>
  </Navbar.Collapse>
  </Container>
</Navbar>

Sample of Code

The simple hack is to add an empty nav bar before your own nav bar content with the class me-auto, as shown below.

{/*This is the hack */}
    <Nav className="me-auto">
    </Nav>
{/*Any nav bar created beneath this now aligns to the right.*/}

You can ask questions if you don't quite understand.

This worked for me but not sure if this would be the best possible approach. — Ahmad Ghadiri, Jun 29 '22 at 16:44

score 0 · Answer 11 · answered Feb 18 '17 at 05:15

0

Give css property float : left to the division or to whatever you want to align right :)

answered Feb 18 '17 at 05:15

Saif Ali Khan

818
3
9
34

score 0 · Answer 12 · answered Feb 18 '17 at 05:22

0

You can target the dropdown menu with a dropdown-menu-right to align the Contribute nav item right. bootstrap dropdown alignment docs

answered Feb 18 '17 at 05:22

xarthna

56
5

tried adding `right` to `dropdown-menu` thus making `dropdown-menu-right` but it did not pull the navbar item `Contribute` to the right unfortunately. – ipatch Feb 18 '17 at 05:39
It looks like the markup may be a problem. Your dropdown menu is a `ul` within a `li`. The class `dropdown-menu-right` will align right the dropdown menu to that of the parent. Unless that `li` item stretches to the end of the navbar container, the contribute dropdown won't move. – xarthna Feb 18 '17 at 06:09
I think your on to something. – ipatch Feb 18 '17 at 22:44

score 0 · Answer 13 · answered Oct 23 '22 at 20:27

0

add a

div className='Navbar'

before <navbar.Toggle> and add CSS item

.Navbar{ justify-content: flex-end;}

answered Oct 23 '22 at 20:27

Dulana Manjitha Kularatne

11
3

React bootstrap Navbar: How to right align a navbar item

13 Answers13

Linked