VueJS close Hamburger Menu on Route Change

Question

I have a simple VueJS App with a Navigation Bar from Bootstrap:

<template>
  <header id="header">
    <nav class="navbar mynavbar navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="logo" href="index.html"><img src="images/logo.png" alt=""></a>
        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><router-link to="/home"><a>Home</a></router-link></li>
             <li><router-link to="/about"><a>About Us</a></router-link></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container -->
    </nav>
  </header>
</template>

Now I want to ensure that when I change the route, the Bootstrap Menu gets closed. What is the best way to accomplish this?

I'm also interested in an option that waits for the next page to load, or at least the current one to transition out before the close function — Djave, Nov 27 '20 at 16:58

score 31 · Answer 1 · answered May 04 '18 at 12:27

31

Instead of adding event handlers to every router-link, you can simply watch the $route property for changes:

<script>
export default {
  watch: {
    '$route' () {
      $('#navbar-collapse').collapse('hide');
    }
  }
}
</script>

answered May 04 '18 at 12:27

cinder

426
4
2

1

Hey there, is there a solution without jquery? – RacoonOnMoon Feb 19 '19 at 21:47
1

Wthout JQuery : document.querySelector("#navbar-collapse").classList.toggle("active"); – Amine Zel Nov 21 '20 at 23:52

score 19 · Answer 2 · answered Jun 28 '19 at 04:27

19

Without Bootstrap and jQuery, can be easily achieved using class toggle and watch route changes.

<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" 
    @click="toggledNav = !toggledNav"
>
   <span aria-hidden="true"></span>
   <span aria-hidden="true"></span>
   <span aria-hidden="true"></span>
</a>

Script:

export default {
  data () {
    return {
      toggledNav: false
    }
  },
  watch: {
    '$route' () {
      this.toggledNav = false
    }
  }
}

answered Jun 28 '19 at 04:27

claudios

6,588
8
47
90

This worked for me but I had to add v-bind:class="{ 'show': toggledNav }" to the collapse div. – Dylan Glockler Sep 19 '19 at 16:07
@DylanGlockler you can use :class shorthand – claudios Sep 20 '19 at 02:44
1

Nice and simple solution! – Morten Hagh Sep 30 '19 at 11:10
For anyone whose linter shouts at them over `'$route' ()` , you can also just write `$route(){}` and it works fine. Not sure why examples show this as a string. – paceaux Sep 23 '21 at 21:52

score 4 · Answer 3 · answered Mar 17 '17 at 11:52

You could give this a try:

<template>
    <header id="header">
        <nav class="navbar mynavbar navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="logo" href="index.html"><img src="images/logo.png" alt=""></a>
                </div>

                <div class="collapse navbar-collapse" id="navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li><router-link @click.native="closeMenu()" to="/home"><a>Home</a></router-link></li>
                        <li><router-link @click.native="closeMenu()" to="/about"><a>About Us</a></router-link></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container -->
        </nav>
    </header>
</template>
<script>
    export default {
        methods: {
            closeMenu() {
                $('#navbar-collapse').collapse('hide');
            }
        }
    }
</script>

score 3 · Answer 4 · answered Dec 19 '21 at 14:36

With vue3 and bootstrap5, adding this to the router-link element:

data-bs-toggle="collapse" data-bs-target=".navbar-collapse"

did not work for me: the menu would close without the link being followed. So, I added this to router/index.js:

router.beforeEach(() => {
    document.getElementById('navbarCollapse').classList.remove('show');
})

with navbarCollapse being the id of the div holding the menu/nav items. It seemed to do the trick.

If necessary you can adjust the hamburger button state: its class list would need to contain "collapsed" and aria-expanded set to "false". This gets corrected though when the user clicks the button again, so I didn't opt to write that code.

I was just gonna say, can't believe no one suggested router.beforeEach(), it is the obvious choice. — Mikkel Cortnum, Feb 04 '23 at 14:35

Umair Qazi · Answer 5 · 2020-06-16T14:25:34.547

If you are using bootstrap-vue and vue-router.

<script>
    export default {
        watch: {
          '$route' () {
                const element = document.querySelector("#nav-collapse");
                let isShown = element.classList.contains("show");
                if(isShown){
                    this.$root.$emit('bv::toggle::collapse', 'nav-collapse')
                }
            }
        }
    }
</script>

<template>
  <b-navbar toggleable="lg" type="" class="p-0">
      <b-navbar-toggle target="nav-collapse" id="navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
      </b-navbar-toggle>
      <b-collapse id="nav-collapse" is-nav>
          <div class="nav-wrapper w-100">
             <ul class="app-navigation__list">
                <router-link to="/whatever" tag="li" exact class="app-navigation__list__item">
                    <a href="">
                        <span class="link-text">Home</span>
                    </a>
                </router-link>
                <router-link to="/whatever" tag="li" exact class="app-navigation__list__item">
                    <a href="">
                        <span class="link-text">About</span>
                    </a>
                </router-link>
                <router-link to="/whatever" tag="li" exact class="app-navigation__list__item">
                    <a href="">
                        <span class="link-text">Store</span>
                    </a>
                </router-link>
            </ul>
          </div>
      </b-collapse>
  </b-navbar>
</template>

https://bootstrap-vue.org/docs/components/collapse#comp-ref-b-collapse-rootEventListeners Above snippet is watching for route change and then it will get the element by id `#nav-collapse`. Bootstrap adds a class namely `show` when it gets expanded on hamburger click. if its true it will trigger the toggle method which is mentioned in bootstrap-vue docs. — Umair Qazi, Jun 16 '20 at 13:59
I've updated my answer, have a look for better understanding. — Umair Qazi, Jun 16 '20 at 14:27

score 0 · Answer 6 · answered Jan 16 '21 at 10:41

I know this is an old question but my answer might help someone. do this in your router/index.js

    const router = createRouter({}); //P.S I am using Vue3

then add this before each route entering like so.

    router.beforeEach(() => {
        $('.navbar-collapse').collapse('hide'); //Be sure to import jquery
    });

Nawi · Answer 7 · 2022-01-24T10:22:38.047

Because this is such a simple task, I try to make it as simple as my simple website.

     Vue.mixin((()=> {
let store = Vue.observable({
    indexMenu: false,
})
return{
    computed: {
        menu: {
            get() {
                return store.indexMenu
            },
            set(val) {
                store.indexMenu = val
            }
        }
    },
    watch: {
        '$route' () {
            this.menu = false
        }
    }
}})())

score -1 · Answer 8 · answered Mar 18 '21 at 10:17

-1

    router.beforeEach((from,to,next) => {
           $('.navbar-collapse').collapse('hide'); //Be sure to import jquery
        next();
    });

This works

answered Mar 18 '21 at 10:17

JJRM

1

VueJS close Hamburger Menu on Route Change

8 Answers8

Linked