How to hide collapsible Bootstrap navbar on click - css

Question

I've created this collapsable navbar using Bootstrap 4 that works nicely, but I would like it to close when the user clicks on a link. Any way to do this? Thanks
html navbar:
<nav class="navbar navbar-toggleable-md fixed-top">
<button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="container">
<a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a>
<div class="collapse navbar-collapse" id="navbarDiv">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-us">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>
css for .icon-bar, since Bootstrap 4 doesn't use the icon-bar class.
.navbar-toggler .icon-bar {
margin: 7px;
display: block;
width: 22px;
height: 1px;
background-color: #cccccc;
border-radius: 1px;
}

Answer 1

Update 2021 - Bootstrap 5 (beta)
Use javascript to add a click event listener on the menu items to close the Collapse navbar..
const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle)
navLinks.forEach((l) => {
l.addEventListener('click', () => { bsCollapse.toggle() })
})
BS5 demo javascript method
Or, Use the data-bs-toggle and data-bs-target data attributes in the markup on each link to toggle the Collapse navbar...
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto">
<li class="nav-item active">
<a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Disabled</a>
</li>
</ul>
<form class="d-flex my-2 my-lg-0">
<input class="form-control me-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
BS5 demo data-attributes method
Update 2019 - Bootstrap 4
The navbar has changed, but the "close after click" method is still the same:
BS4 demo jQuery method
BS4 demo data-toggle method
Bootstrap 3 (original answer)
You can add the collapse component to the links like this..
<ul class="navbar-nav mr-auto">
<li class="nav-item active" data-toggle="collapse" data-target=".navbar-collapse.show">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
<a class="nav-link" href="#about-us">About</a>
</li>
<li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
</ul>
BS3 demo using 'data-toggle' method
Or, (perhaps a better way) use jQuery like this..
$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
BS3 demo using jQuery method

Answer 2

I am using ANGULAR and since it gave me problems the routerLink just add the data-toggle and target in the li tag.... or use jquery like "ZimSystem"
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item" data-toggle="collapse" data-target=".navbar-collapse.show">
<a class="nav-link" routerLink="/inicio" routerLinkActive="active" >Inicio</a>
</li>
</ul>
</div>

Answer 3

You can call $.collapse('hide'); with an event handler on the links.
$('.nav-link').on('click',function() {
$('.navbar-collapse').collapse('hide');
});
.navbar-toggler .icon-bar {
margin: 7px;
display: block;
width: 22px;
height: 1px;
background-color: #cccccc;
border-radius: 1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-toggleable-md fixed-top">
<button id="nav-btn" class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="container">
<a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a>
<div class="collapse navbar-collapse" id="navbarDiv">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-us">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">Pricing</a>
</li>
</ul>
</div>
</div>
</nav>

Answer 4

With trying out above solutions, I was missing a solution for Dropdown toggles, so here you go! Also opens submenu items.
Maybe you have to tweak it a bit if your toggle class is different.
$('.navbar-nav li a').on('click', function(){
if(!$( this ).hasClass('dropdown-toggle')){
$('.navbar-collapse').collapse('hide');
}
});

Answer 5

this is the solution to close menu when click on anchor then apply this line in list item
data-target="#sidenav-collapse-main" data-toggle="collapse"
the real example that work for me is below
<li class="nav-item" data-target="#sidenav-collapse-main" data-
toggle="collapse" >
<a class="nav-link" routerLinkActive="active" routerLink="/admin/users">
<i class="ni ni-single-02 text-orange"></i> Users
</a>
</li>

Answer 6

The easiest way to do it using only Angular 2/4 template with no coding:
<nav class="navbar navbar-default" aria-expanded="false">
<div class="container-wrapper">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" (click)="isCollapsed = !isCollapsed">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse no-transition" [attr.aria-expanded]="!isCollapsed" [ngClass]="{collapse: isCollapsed}">
<ul class="nav navbar-nav" (click)="isCollapsed = !isCollapsed">
<li [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}"><a routerLink="/">Home</a></li>
<li [routerLinkActive]="['active']"><a routerLink="/about">About</a></li>
<li [routerLinkActive]="['active']"><a routerLink="/portfolio">Portfolio</a></li>
<li [routerLinkActive]="['active']"><a routerLink="/contacts">Contacts</a></li>
</ul>
</div>
</div>
</nav>

Answer 7

This code simulates a click on the burguer button to close the navbar by clicking on a link in the menu, keeping the fade out effect. Solution with typescript for angular 7. Avoid routerLink problems.
ToggleNavBar () {
let element: HTMLElement = document.getElementsByClassName( 'navbar-toggler' )[ 0 ] as HTMLElement;
if ( element.getAttribute( 'aria-expanded' ) == 'true' ) {
element.click();
}
}
<li class="nav-item" [routerLinkActive]="['active']">
<a class="nav-link" [routerLink]="['link1']" title="link1" (click)="ToggleNavBar()">link1</a>
</li>

Answer 8

I am using Angular 5 with Boostrap 4. It works for me in this way.
$(document).on('click', '.navbar-nav>li>a, .navbar-brand, .dropdown-menu>a', function (e) {
if ( $(e.target).is('a') && $(e.target).attr('class') != 'nav-link dropdown-toggle' ) {
$('.navbar-collapse').collapse('hide');
}
});
}
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" [routerLink]="['/home']">FbShareTool</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation" style="">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarColor01">
<ul class="navbar-nav mr-auto">
<li class="nav-item active" *ngIf="_myAuthService.isAuthenticated()">
<a class="nav-link" [routerLink]="['/dashboard']">Dashboard <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item dropdown" *ngIf="_myAuthService.isAuthenticated()">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Manage
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" [routerLink]="['/fbgroup']">Facebook Group</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Fetch Data</a>
</div>
</li>
</ul>
<ul class="navbar-nav navbar-right navbar-right-link">
<li class="nav-item" *ngIf="!_myAuthService.isAuthenticated()" >
<a class="nav-link" (click)="logIn()">Login</a>
</li>
<li class="nav-item" *ngIf="_myAuthService.isAuthenticated()">
<a class="nav-link">{{ _myAuthService.userDetails.displayName }}</a>
</li>
<li class="nav-item" *ngIf="_myAuthService.isAuthenticated() && _myAuthService.userDetails.photoURL">
<a>
<img [src]="_myAuthService.userDetails.photoURL" alt="profile-photo" class="img-fluid rounded" width="40px;">
</a>
</li>
<li class="nav-item" *ngIf="_myAuthService.isAuthenticated()">
<a class="nav-link" (click)="logOut()">Logout</a>
</li>
</ul>
</div>
</nav>

Answer 9

In my case the menu was always in the shown state after using the bootstrap 5 js solution of Zim.
The problem was resolved after adding toggle: false to the Collapse object constructor as also shown in one example of the specification.
Modified code of Zen:
const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle, {
toggle: false
})
navLinks.forEach((l) => {
l.addEventListener('click', () => { bsCollapse.toggle() })
})
(I could not comment, so I created a separate answer)

Answer 10

I'm working with Bootstrap 5.1.3 in React and Redux-Toolkit. By adding a simple span tag like this to my Link (Route) component, like this: <span data-bs-target="#navbarNav" data-bs-toggle="collapse">Home</span>, allows the bootstrap collapse and link route to work seamlessly.
*If you see a blinking effect, you can fix by adding bootstrap screen size display tags e.g.:
<Link to={'/home'} className="nav-link d-sm-none"><span data-bs-target="#navbarNav" data-bs-toggle="collapse">Home</span></Link>
<Link to={'/home'} className="nav-link d-none d-sm-block">Home</Link>
*No extra JS or Jquery required
*It should work with most applications using Bootstrap 5.0
<nav className="navbar navbar-expand-lg navbar-dark bg-dark navbar-expand-sm fixed-top">
<div className="container">
<button className="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false"
aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav mt-2 mt-sm-0">
<li className="nav-item">
// 2 tags below for different screen sizes
<Link to={'/home'} className="nav-link d-sm-none"><span data-bs-target="#navbarNav" data-bs-toggle="collapse">Home</span></Link>
<Link to={'/home'} className="nav-link d-none d-sm-block">Home</Link>
</li>
<li className="nav-item">
// 2 tags below for different screen sizes
<Link to={'/counter'} className="nav-link d-sm-none"><span data-bs-target="#navbarNav" data-bs-toggle="collapse">Counter</span></Link>
<Link to={'/counter'} className="nav-link d-none d-sm-block">Counter</Link>
</li>
</ul>
</div>
</div>
</nav>

Answer 11

None of the answers above was helpful since I use React Bootstrap. In this case, I had to create a state which stored whether the navbar was collapsed or expanded.
The state gets updated whenever I toggle/click a link.
The toggle happens if I click the toggle menu itself.
The closure happens whenever I click a link.
Here is a code snippet that does the same:
function Navigation() {
const [expanded, setExpanded] = useState(false);
const navToggle = () => {
setExpanded(expanded ? false : true);
};
const closeNav = () => {
setExpanded(false);
};
return (
<React.Fragment>
<Navbar expand="lg" expanded={expanded}>
<Container>
<Navbar.Brand as={Link} to="/" onClick={closeNav}>
Site Header
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" onClick={navToggle} />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
<Nav.Link to="/link1" onClick={closeNav}>
Link 1
</Nav.Link>
<Nav.Link to="/link2" onClick={closeNav}>
Link 2
</Nav.Link>
<Nav.Link to="/link3" onClick={closeNav}>
Link 3
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
</React.Fragment>
);
}

Answer 12

I was searching for a solution with Bootstrap 5 to hide a popup menu when a new partial view was diplayed, I did it like this but duno if I am right.
// clear menu dropdowns
const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('megaMenuDropdown')
const bsCollapse = new bootstrap.Collapse(menuToggle)
navLinks.forEach(() => bsCollapse.hide());

Answer 13

The other answers didn't work for me. I use typescript with Bootstrap 5 and React.
What I do is first getting the hamburger button and then calling 'click' on it:
var btn = document.getElementsByClassName("navbar-toggler") as HTMLCollectionOf<HTMLElement>;
btn[0].click();
Full example:
<Navbar expand="lg" className="nav iq-navbar">
<Container fluid className="navbar-inner">
<Navbar.Toggle aria-controls="navbarSupportedContent">
<span className="navbar-toggler-icon">
<span className="navbar-toggler-bar bar1 mt-2"></span>
<span className="navbar-toggler-bar bar2"></span>
<span className="navbar-toggler-bar bar3"></span>
</span>
</Navbar.Toggle>
<Navbar.Brand as="div" className="mb-2 ms-auto navbar-list mb-lg-0">
<img src={logo} alt="logo" className="img-fluid p-0 flex-column" />
</Navbar.Brand>
<Navbar.Collapse className="col-md-2 ms-auto align-items-start" id="navbarSupportedContent">
<ul className="navbar-nav ms-auto">
<li className="item-name">
<Link className={`${location.pathname === '/dashboard' ? 'active' : ''} nav-link d-sm-none h1`} aria-current="page" to="/dashboard" onClick={() => { var btn = document.getElementsByClassName("navbar-toggler") as HTMLCollectionOf<HTMLElement>; btn[0].click(); }}>D </Link>
<Link className={`${location.pathname === '/dashboard' ? 'active' : ''} nav-link d-none d-sm-block`} aria-current="page" to="/dashboard" onClick={() => { var btn = document.getElementsByClassName("navbar-toggler") as HTMLCollectionOf<HTMLElement>; btn[0].click(); }}>Dashboard</Link>
</li>
</ul>
</Navbar.Collapse>
</Container>
</Navbar>

Answer 14

You can use a simply bind on click and close, like this: (click)="drawer.close()
<a class="nav-link" [routerLink]="navItem.link" routerLinkActive="selected" (click)="drawer.close()">

Answer 15

add below code in your < a > TAG
data-toggle="collapse" data-target=".navbar-collapse.show"
as shows below in every TAG
<li class="nav-item">
<a class="nav-link" href="#about-us" data-toggle="collapse" data-target=".navbar-collapse.show">About</a>
</li>

Answer 16

I have modified the answer of Zim.
Now the code closes the navbar only in case it is open.
const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = new bootstrap.Collapse(menuToggle, {
toggle: false
})
navLinks.forEach((l) => {
l.addEventListener('click', () => {
if(bsCollapse._isShown()){
bsCollapse.hide()
}
})
})