Nuxt – Buefy – mobile menu not working

problem

Using beufy and <b-navbar> component. Mobile menu is being closed after clicking on any link inside instead of opening another page. Probably click event is not propagated

solution

Need to set navbar so it does not automatically close on click (close-on-click) and manually close it after menu link is clicked

// .sync modifier enables 2way binding
<b-navbar
    type="is-warning"
    fixed-top
    transparent
    :is-active.sync="mobilemenu"
    :close-on-click="false"
  >

//.native modifier is necessery for nuxt-link, router-link etc 
      <b-navbar-item
        tag="nuxt-link"
        :to="{ path: '/about/' }"
        @click.native="menuClicked()"
      >
        About
      </b-navbar-item>


export default {
  data() {
    return {
      mobilemenu: false
    }
  },

  methods: {
    menuClicked(event) {
      this.mobilemenu = false
    }
  }
}

Leave a comment

Your email address will not be published. Required fields are marked *