Develop Reference

I'm trying to close the offcanvas menu in React Bootstrap when I click a link

I'm using a combination of React Bootstrap and React, to make a single page application, I've tried a few methods to get the Offcanvas menu to close when I click a link. I tried making an inline script on the link that toggles the menu, but what I found is the menu closes as I want it to but then the link only takes me halfway to where it should navigate to.
this is my code so far:
import React from "react";
import { Navbar, Nav, Container, Offcanvas } from "react-bootstrap";
import { StaticImage } from "gatsby-plugin-image";
import styled from "styled-components";
import { Link } from "gatsby";
const Wrapper = styled.div`
background-color: #9ac2ba;
.Nav-Brand {
display: flex;
}
.navbar {
background-color: #9ac2ba;
}
`;
const LinkWrapper = styled.div`
margin-top: 20px;
font-size: 1.5rem;
text-align: center;
color: #333;
.nav-link {
color: #333;
}
.nav-link:hover {
color: #000;
}
`;
const Navigation = () => {
return (
<Wrapper>
<Navbar
as="nav"
variant="light"
fixed="top"
expand={false}
className="shadow"
>
<Container>
<Navbar.Brand href="/" className="Nav-Brand">
<StaticImage
src="../images/Spf-Brand-01.jpg"
alt="Brand Image"
layout="constrained"
placeholder="blurred"
height={50}
loading="eager"
/>
<h1 className="visually-hidden">
SPF Paint & Decorating, Birmingham
</h1>
</Navbar.Brand>
<Navbar.Toggle
aria-controls="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel"
/>
<Navbar.Offcanvas id="offcanvasNavbar" placement="start">
<Offcanvas.Header closeButton>
<Offcanvas.Title id="offcanvasNavbarLabel">
<span className="visually-hidden">SPF Nav Menu</span>
</Offcanvas.Title>
</Offcanvas.Header>
<Offcanvas.Body>
<Nav className="justify-content-end flex-grow-1 pe-3">
<StaticImage
src="../images/Spf-Brand-01.jpg"
alt="Brand Image"
layout="constrained"
placeholder="blurred"
height={50}
loading="eager"
className="offcanvas-brand"
/>
<LinkWrapper>
<Link to="/" className="nav-link">
Home
</Link>
<Link to="/#services" className="nav-link">
Services
</Link>
<Link to="/#faq" className="nav-link">
FAQ
</Link>
<Link to="/#contact" className="nav-link">
Contact
</Link>
</LinkWrapper>
</Nav>
</Offcanvas.Body>
</Navbar.Offcanvas>
</Container>
</Navbar>
</Wrapper>
);
};
export default Navigation;
this is the build of the site: https://pland.netlify.app/

All your links are to content on the same page, so using Link isn't necessary. Instead, replace these with regular anchor tags <a href=''>Link</a>
Secondly, the default behaviour of Offcanvas is that when the overlay is closed the focus is returned to where it was when the overlay was opened. That's why the page isn't scrolling to the correct position when the overlay is closed. To change this, you can pass in restoreFocus={false} prop to Offcanvas. See Offcanvas API docs.
Thirdly, to get the menu to close when a link is clicked, you should track whether the menu is open in state and add a toggle function to the onClick prop of each link, as well as the Navbar.Toggle.
const Navigation = () => {
const [menuOpen, setMenuOpen] = useState(false)
const toggleMenu = () => {
setMenuOpen(!menuOpen)
}
const handleClose = () => setMenuOpen(false)
return(
/** Omit code */
<Navbar.Toggle
aria-controls='offcanvasNavbar'
aria-labelledby='offcanvasNavbarLabel'
/** Add onClick toggle here */
onClick={toggleMenu}
/>
<Navbar.Offcanvas
id='offcanvasNavbar'
placement='start'
/** Add these props */
restoreFocus={false}
show={menuOpen}
onHide={handleClose}
>
/** omit code */
<Nav className='justify-content-end flex-grow-1 pe-3'>
<a href='#services' className='nav-link' onClick={toggleMenu}>
Services
</a>
<a href='#faq' className='nav-link' onClick={toggleMenu}>
FAQ
</a>
{/** more links */}
</Nav>
/** omit code */
)
}

There is an option in the docs to automatically close: collapseOnSelect
https://react-bootstrap.netlify.app/components/navbar/#navbar-props
<Navbar
collapseOnSelect
as="nav"
variant="light"
fixed="top"
expand={false}
className="shadow"
>

React bootstrap navbar collapse not working

I have used react Bootstrap navbar also used react-scroll for smooth navigation. It's working fine but navbar is not collapsing when clicking any nav item in the responsive mode.
Packages
import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import { Link } from "react-scroll";
import { LinkContainer } from "react-router-bootstrap";
import { Navbar, Container, NavDropdown, Nav, Dropdown } from "react-bootstrap";
Navbar
<Navbar
sticky="top"
id="navbar"
bg="light"
expand="lg"
className="navbar navbar-expand-lg navbar-light bg-light"
collapseOnSelect={true}
>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Link
activeClass="active"
to="features"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
onClick={this.closeNavbar}
>
Features
</Link>
<Link
activeClass="active"
to="about"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
>
About
</Link>
</Nav>
</Navbar.Collapse>
</Navbar>

Had the same issue. I found that "collapseOnSelect" works if we add "eventKey" for Nav.Link item
Example:
import { Link } from 'react-router-dom';
import { Nav, Navbar} from 'react-bootstrap';
<Navbar collapseOnSelect expand="lg">
<Navbar.Toggle />
<Navbar.Collapse>
<Nav className="mr-auto d-block">
<Nav.Item>
<Nav.Link eventKey="1" as={Link} to="/Home">
Home
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="2" as={Link} to="/Contant">
Page Contant
</Nav.Link>
</Nav.Item>
</Nav>
</Navbar.Collapse>
</Navbar>

I had the same issue and resolved it by putting Bootstrap's Nav.Link back in. Here's how it would work based on your code :
<Navbar sticky="top" id="navbar"className="navbar" collapseOnSelect bg="light expand="lg">
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ml-auto">
<Nav.Link>
<Link
activeClass="active"
to="features"
spy={true}
smooth={true}
offset={-70}
duration={800}
className="nav-link"
>
Features
</Link>
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>

it's know issue in React Bootstrap that when we clicked on menu item it will not hide the menu automatically, below mentioned code help you to achieve the same.
An easy workaround that doesn't require jQuery:
<DropdownButton title={buttonTitle} onSelect={() => null}>
or if you're still using ES5:
<DropdownButton title={buttonTitle} onSelect={function() {}}>
It doesn't seem to matter what the onSelect callback returns.

I had the same problem, found a fix.
It is must to add expand attribute to your Navbar Component.
<Navbar variant="dark" expand="lg">

just use eventKey="2" inside <Nav.link/> . It will works fine for react js .

Toggle classes (navbar burger menu [show, hide]) | works in 'develop' but not in 'build'

In the Navbar.js component I want to be able to set state to true or false of the is-active css class, so that when the user presses the burger menu button, the menu shows or hides.
The code below works in the gatsby develop but not in the gatsby build.
There are no errors in 'build'.
Question: Why the code below does not work in gatsby build?
import React from 'react';
import Link from 'gatsby-link';
import logo from '../img/logo.svg';
class Navbar extends React.Component {
state = { showMenu: false }
toggleMenu = () => {
this.setState({
showMenu: !this.state.showMenu
})
}
render() {
const menuActive = this.state.showMenu ? 'is-active' : '';
const burgerActive = this.state.showMenu ? 'is-active' : '';
return (
<nav className="navbar">
<div className="navbar-brand">
<Link className="navbar-item" to="/">
<img src={logo} style={{ width: '88px' }} itemprop="image" alt="" />
</Link>
<div className={`navbar-burger burger ${burgerActive}`} onClick={this.toggleMenu}>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div className={`navbar-menu ${menuActive}`} >
<div className="navbar-start">
<Link className="navbar-link" to="/" onClick={this.toggleMenu}>
Home
</Link>
<Link className="navbar-link" to="/services" onClick={this.toggleMenu}>
Services
</Link>
<Link className="navbar-link" to="/contact" onClick={this.toggleMenu}>
Contact
</Link>
</div>
</div>
</nav>)
}
};
export default Navbar;

React bootstrap Navbar: How to right align a navbar item

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,

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.

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>

The other way you could do it is:
<Nav className="ms-auto">
Unfortunately adding "pullRight" wasn't the solution and it won't work.

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>

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

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

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>

use the class navbar-right the reach what you want

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

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.

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

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

add a
div className='Navbar'
before <navbar.Toggle> and add CSS item
.Navbar{ justify-content: flex-end;}

react router takes two click to update the route

I have used react-router v4 for routing in my application. I have used routing to show various form like for showing apartment form, experience form, login, register etc.
Problem
When i click on apartment image, react router routes to apartment form. The route becomes /apartment. If i again then click on register button, the route do not get updated. I have to double click on register button to update the route to /register.
Here is my code
class App extends Component {
constructor(props, context) {
super(props, context);
console.log('context', context);
this.state = { show: false };
}
showModal(e) {
e.preventDefault();
this.setState({ show: true });
}
hideModal() {
this.setState({ show: false });
}
render() {
return (
<div className="container-fluid">
<Nav
showModal={(e) => this.showModal(e)}
hideModal={() => this.hideModal()}
show={this.state.show}
onHide={() => this.hideModal()}
/>
</div>
);
}
}
App.contextTypes = {
router: React.PropTypes.object
};
const Nav = (props) => (
<Router>
<div>
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<a className="navbar-brand" href="">
<img
alt="Brand"
className="img-responsive"
src={logo}
role="presentation"
/>
</a>
</div>
<div className="collapse navbar-collapse" id="collapse-1">
<ul className="nav navbar-nav navbar-right nav-social-icon">
<li className="dropdown">
<a
href=""
className="dropdown-toggle"
data-toggle="dropdown"
>
ES
<span className="caret" />
</a>
<ul className="dropdown-menu" style={{ color: '#000', fontWeight: 'bold' }}>
<li onClick={() => props.selectedLocale('en')}>
en
</li>
<li onClick={() => props.selectedLocale('es')}>
es
</li>
</ul>
</li>
<li className="btn-group regLog">
<button
className="btn btn-default"
onClick={props.showModal}
>
<Link to={{ pathname: '/signup' }}>
{props.intl.formatMessage({ id: 'nav.registration.text' }) }
</Link>
</button>
<button
onClick={props.showModal}
className="btn btn-default"
>
<Link to={{ pathname: '/login' }}>
{props.intl.formatMessage({ id: 'nav.login.text' }) }
</Link>
</button>
{props.show ?
<ModalForm
show={props.show}
onHide={props.onHide}
/> : <span />
}
</li>
</ul>
</div>
</div>
</nav>
</div>
</Router>
);
class ModalForm extends Component {
render() {
const { show, onHide, intl } = this.props;
return (
<Router>
<Modal
{...this.props}
show={show}
onHide={onHide}
dialogClassName="custom-modal"
>
<Modal.Header closeButton>
<Link to='/login' className="logTitle">
<Modal.Title id="contained-modal-title-lg">
{intl.formatMessage({ id: 'nav.login.text' })}
</Modal.Title>
</Link>
<Link to='/signup' className="logTitle">
<Modal.Title id="contained-modal-title-lg">
{intl.formatMessage({ id: 'nav.registration.text' })}
</Modal.Title>
</Link>
</Modal.Header>
<Modal.Body>
<Match pattern='/login' component={Login} />
<Match pattern='/signup' component={Signup} />
</Modal.Body>
</Modal>
</Router>
);
}
}
I think its because of using onClick event and routing. How can i solve it?
UPDATE
I tried to use router context but i am getting undefined. App is a parent component and Nav is a child component. Nav component uses router while onClick functions are handled in App component where this.context.router has to be handled.
Thanks

Put the redirect on onClick function using router context ...
https://github.com/ReactTraining/react-router/blob/master/docs/API.md#routercontext
You use contextTypes from react to access router from react-router and the n use push to change url

I am also using RRv4, to handle button links as you have then I wrap the button in the link. The put the overall click handler on the link. This should call prior to the transition and if you need to prevent transition you can simply call e.preventDefault
This will maintain the declarative nature of RRv4 and prevent the need to use the experimental context feature in react.