React bootstrap Navbar: How to right align a navbar item
Solution 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>
);
}
});
Solution 2
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.
Solution 3
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>
Solution 4
The other way you could do it is:
<Nav className="ms-auto">
Unfortunately adding "pullRight" wasn't the solution and it won't work.
Solution 5
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>
Comments
-
ipatch almost 2 years
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,