bootstrap-vue/src/components/navbar/navbar-toggle.js

BootstrapVue provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js and with extensive and automated WAI-ARIA accessibility markup.

import listenOnRootMixin from '../../mixins/listen-on-root'

export default {
  mixins: [listenOnRootMixin],
  render (h) {
    const t = this
    return h(
      'button',
      {
        class: ['navbar-toggler'],
        attrs: {
          type: 'button',
          'aria-label': t.label,
          'aria-controls': t.target,
          'aria-expanded': t.toggleState ? 'true' : 'false'
        },
        on: { click: t.onClick }
      },
      [t.$slots.default || h('span', { class: ['navbar-toggler-icon'] })]
    )
  },
  data () {
    return {
      toggleState: false
    }
  },
  props: {
    label: {
      type: String,
      default: 'Toggle navigation'
    },
    target: {
      type: String,
      required: true
    }
  },
  methods: {
    onClick () {
      this.$root.$emit('bv::toggle::collapse', this.target)
    },
    handleStateEvt (id, state) {
      if (id === this.target) {
        this.toggleState = state
      }
    }
  },
  created () {
    this.listenOnRoot('bv::collapse::state', this.handleStateEvt)
  }
}