Demo

Home
Marketing
About

Source Code

<template>
  <b-navbar-nav v-if="menu" class="ml-auto">
    <div v-for="item in menu.items" :key="item.index">
        <b-nav-item-dropdown v-if="item.items" :to="item.to" :href="item.href" :target="item.target" :text="item.title">
          <b-dropdown-item v-for="subitem in item.items" :key="subitem.index" :to="subitem.to" :href="subitem.href" :target="subitem.target">{{ subitem.title }}</b-dropdown-item>
        </b-nav-item-dropdown>
      <b-nav-item :to="item.to" :href="item.href" :target="item.target">
        {{ item.title }}
      </b-nav-item>
    </div>
  </b-navbar-nav>
</template>

props

// #region snippet
<template>
  <b-navbar-nav v-if="menu" class="ml-auto">
    <div v-for="item in menu.items" :key="item.index">
        <b-nav-item-dropdown v-if="item.items" :to="item.to" :href="item.href" :target="item.target" :text="item.title">
          <b-dropdown-item v-for="subitem in item.items" :key="subitem.index" :to="subitem.to" :href="subitem.href" :target="subitem.target">{{ subitem.title }}</b-dropdown-item>
        </b-nav-item-dropdown>
      <b-nav-item :to="item.to" :href="item.href" :target="item.target">
        {{ item.title }}
      </b-nav-item>
    </div>
  </b-navbar-nav>
</template>
// #endregion snippet

<script>

export default {
  name: 'MvadMainMenu',
  props: {
    menu: { type: Object }
  }
}
</script>

<style lang="scss" scoped>
.nav-link {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 300;
  margin-left: 1em;
}
</style>

...