34

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,

navbar

2
  • 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
    Commented Feb 18, 2017 at 5:14
  • 2
    I was trying with ml-auto, it didn't work for me. stackoverflow.com/a/65562241/8287187 This helped me out. Long story Short, use ms-auto if ml-auto is not working.
    – amit singh
    Commented Jun 25, 2021 at 6:11

13 Answers 13

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.

3
  • After so many tries and hacking, this single liner saved me. This works! Commented Nov 12, 2020 at 3:35
  • Thank you so much for this single line of code! Hahaha helped out a headache Commented Jul 25, 2021 at 21:45
  • 1
    It doesn't work :( Commented Oct 26, 2021 at 17:36
24

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>
1
  • My problem with this one is it doesn't seem to work with two <Nav> elements, the second one just goes next to the first one regardless of whatever alignment style class I'm using
    – kugo2006
    Commented Mar 30, 2022 at 5:30
23

The other way you could do it is:

<Nav className="ms-auto">

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

8

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

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>
1
  • 5
    Does not work as of 8/30/21, all items are evenly spread out across the navbar after copy-pasting the exact code. Commented Aug 30, 2021 at 10:22
8

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-*

7

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

3

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>
2

use the class navbar-right the reach what you want

1

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>
    );
  }
});
1

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.

1
  • This worked for me but not sure if this would be the best possible approach. Commented Jun 29, 2022 at 16:44
0

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

0

add a

div className='Navbar'

before <navbar.Toggle> and add CSS item

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

If you are using Bootstrap 5, use ms-auto class name to shift the nav links to right. ms-auto stands for margin left(s-start)

<Nav className="ms-auto">

I used the same solution and it worked for me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.