How to hide collapsible Bootstrap navbar on click

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

score 262 · Accepted Answer · edited Nov 14 '22 at 22:35

262

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

edited Nov 14 '22 at 22:35

Rejaul

831
1
12
35

answered Feb 22 '17 at 20:32

Carol Skelly

351,302
90
710
624

2

Hi, thanks for the reply, but when I do this it doesn't collapse the navbar but rather the div element it is linked to with scrollspy. Any suggestions? Thanks – Rudi Thiel Feb 22 '17 at 20:39
3

Great.. and remember you can use `` for the icon bars in BS 4. – Carol Skelly Feb 22 '17 at 20:49
I used that but then I was unable to change the color of the bars. (Wanted them white). I found the above as an alternative but how would I change the color of the icon? Thanks again – Rudi Thiel Feb 22 '17 at 20:54
2

You can use `navbar-inverse` in the Navbar to change all the text colors to white (or transparent white) – Carol Skelly Feb 22 '17 at 20:57
Thank you this worked. I thought navbar-inverse would mess with the background but I was wrong. – Rudi Thiel Feb 22 '17 at 21:01
For those of us using @angular and Asp.NET Core, you can see https://stackoverflow.com/questions/42401606/how-to-hide-collapsible-bootstrap-4-navbar-on-click which shortly states to add _data-toggle="collapse" data-target=".navbar-collapse.show"_ to your *li* tag. – Yennefer Sep 05 '18 at 17:12
1

Scrollspy not working with this part: `data-toggle="collapse" data-target=".navbar-collapse.show"` and works without. Why? – Sogl Oct 24 '18 at 01:12
That has nothing to do with this question or answer – Carol Skelly Oct 24 '18 at 10:17
jQuery method `$('.navbar-nav>li>a').on('click', function() { $('.navbar-collapse').collapse('hide'); })` works well so far. I'm surprised that it is not a part of bootstrap by default. I did not get good results with `data-toggle` in a `` – Vishal Jul 01 '19 at 09:40
8

@Zim - You have to set the `data-toggle` and `data-target` to the parent element (`li`), instead, otherwise scrollspy will not work. Maybe you should edit your answer. :) – jsadev.net Sep 20 '19 at 09:07
Worked like a charm in bootstrap v4 – Signcodeindie Jan 31 '20 at 12:11
I use the jQuery solution and wokrs ok! Thank you! – Raimundo Baravaglio May 11 '20 at 21:19
1

The suggestion from @J.Sadi made this work for me. Otherwise the link clicks did nothing. – totalhack May 30 '20 at 13:52
This works for bootstrap 4.3.x but I've found that the active menu item disappears, any solution with regards to keeping the active class state when the hamburger menu closes? – Tim Kruger Feb 19 '21 at 10:50
8

Adding the tags in the a-href does not work. Browser triggers the close of menu, and never gets to the href link. I think the ultimate solution is to use JavaScript – rubens Mar 05 '21 at 17:00
8

Here's my modified Bootstrap 5 version to avoid having the menu open at launch and having it closed when clicking on a drodown header: ` const navLinks = document.querySelectorAll('.nav-item:not(.dropdown)'); const menuToggle = document.getElementById('navbarSupportedContent'); const bsCollapse = new bootstrap.Collapse(menuToggle, {toggle: false}); navLinks.forEach( function(l) { l.addEventListener('click', function() { // avoid flickering on desktop if (menuToggle.classList.contains('show')) { bsCollapse.toggle(); } }); }); ` – conradfr Jun 09 '21 at 07:48
If you followed docs and imported ONLY the `Collapse` component, rather than the whole bootstrap js, then you can use `new Collapse(menuToggle)` rather than `new bootstrap.Collapse(menuToggle)` – lance.dolan Nov 09 '21 at 05:02
It works for angular routerLinks but not for href='#link'. Menu collapses but navigation doesn't happen – Hasith Dec 30 '21 at 15:45
Great answer, thank you for it. I think it worth mentioning that we need to add and option to this declaration : ``` const bsCollapse = new bootstrap.Collapse(menuToggle, {toggle: false}) ``` to prevent onload show of the navbar – Ahmed Elbessfy Oct 29 '22 at 11:29
in addition to last option for BS3: proposed solution toggled on the first click, instead of just hiding, and that was seemingly fixed by adding the `.in` class to the selector query `$('.navbar-collapse.in').collapse('hide')` which appears only when the navbar is expanded. – rexxar Dec 20 '22 at 17:07

score 60 · Answer 2 · answered Nov 23 '17 at 19:40

60

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>

answered Nov 23 '17 at 19:40

Jesus38

711
5
3

8

Thanks, you have saved the day for me!. I am using Angular 6 with bootstrap 4.1.3. Applied `data-toggle="collapse" data-target=".navbar-collapse.show"` to li's including dropdown li. – learning... Jul 31 '18 at 16:20
2

This answer is Just Clean & Superb! – CN1002 Feb 10 '20 at 11:12
Very helpful for projects using Bootstrap < 5 with frameworks that alter the dom like Angular, React. – Anurag Srivastava May 06 '21 at 07:30
Your solution works perfectly, but your fiddle example looks broken – Fernando Torres May 21 '21 at 20:23
Worked. Why is this answer not on the top? – Sagar Khatri Jun 13 '21 at 18:36
Thanks, worked for me! using Angular 13 with bootstrap 4.5.2. by adding data-toggle="collapse" data-target=".navbar-collapse.show" to li – Abdellah AITMOMIN Jul 07 '22 at 14:33

score 20 · Answer 3 · answered Feb 22 '17 at 20:36

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>

score 13 · Answer 4 · answered Sep 08 '17 at 19:04

13

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

answered Sep 08 '17 at 19:04

Hendrik Vlaanderen

808
1
7
13

1

This is shorter, and possibly faster: `$(".navbar-nav li a:not('.dropdown-toggle')") .on('click', function () { $('.navbar-collapse').collapse('hide'); }` – James Wilkins Mar 13 '19 at 01:33

score 9 · Answer 5 · answered Jan 01 '20 at 10:29

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>

score 3 · Answer 6 · answered May 14 '18 at 17:24

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>

score 3 · Answer 7 · answered Mar 16 '19 at 10:32

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>

The solutions proposed with jQuery do not work correctly in Angular 7 with lazzy loading. — edu, Mar 16 '19 at 10:43

score 2 · Answer 8 · answered Apr 19 '18 at 00:12

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>

score 2 · Answer 9 · answered Oct 28 '21 at 11:49

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)

totallytotallyamazing · Answer 10 · 2022-07-01T00:12:53.050

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>

score 1 · Answer 11 · answered Jan 02 '23 at 19:09

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&nbsp;&nbsp;</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>

score 1 · Answer 12 · answered Mar 22 '23 at 03:13

Bootstrap 5.3 - update 2023

The following works with Bootstrap 5.2 and up:

<div class="collapse navbar-collapse" id="main-menu-navbar">
    <ul class="navbar-nav me-auto my-2 my-lg-0">
        <li class="nav-item">
            <a class="nav-link d-lg-none" href="/">
            <span data-bs-toggle="collapse" data-bs-target="#main-menu-navbar">Home</span>
            </a>
            <a class="nav-link d-none d-lg-block" href="/">Home</a>
        </li>
    </ul>
</div>

2 links in a nav-item

I used 2 links, because if you use data-bs-toggle="collapse" data-bs-target="#main-menu-navbar" your menu will "flash/reload" on desktop too, so the first link will hide on lg and wider screens and the second link will do the opposite, hide on screens smaller than lg

score 0 · Answer 13 · answered Jul 31 '21 at 17:59

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

score 0 · Answer 14 · answered Jul 13 '22 at 09:57

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

score -1 · Answer 15 · edited Oct 20 '20 at 00:09

-1

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()">

edited Oct 20 '20 at 00:09

peterh

11,875
18
85
108

answered Feb 11 '20 at 13:13

Mihai Cristian

115
2
10

score -1 · Answer 16 · answered Nov 11 '20 at 20:02

-1

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>

answered Nov 11 '20 at 20:02

Deven

684
7
10

data-bs-toggle and data-bs-target – caub Sep 16 '21 at 10:53

score -1 · Answer 17 · answered Feb 12 '22 at 21:59

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

How to hide collapsible Bootstrap navbar on click

17 Answers17

Bootstrap 5.3 - update 2023

The following works with Bootstrap 5.2 and up:

2 links in a nav-item

Linked

Related