如何使 Vuetify 移动响应式导航栏和链接抽屉具有嵌套菜单？

Question

我正在使用 Vuetify 通过 Vue 框架制作导航栏组件。我想让产品项目有一个下拉到两个链接。

这是模板 html 和脚本代码（我有一些额外的自定义 CSS 用于颜色，因此我不会在这里添加）：

<template>
  <div>
    <v-toolbar id="navbar" dense elevation=1 dark >
      <v-app-bar-nav-icon class="hidden-md-and-up" @click="sidebar = !sidebar"></v-app-bar-nav-icon>
      <v-navigation-drawer v-model="sidebar" app hide-overlay temporary>
        <v-list>
          <v-list-item v-for="(item, i) in menuItems" exact :key="i" :to="item.path">{{item.title}}</v-list-item>
        </v-list>
      </v-navigation-drawer>

      <v-toolbar-items d-flex>
        <v-btn href="#" id="logo" flat depressed text>Company Name</v-btn>
      </v-toolbar-items>

      <v-spacer></v-spacer>

      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn text v-for="item in menuItems" :key="item.title">
          <router-link :to="item.path">{{item.title}}</router-link>
        </v-btn>
      </v-toolbar-items>
    </v-toolbar>
  </div>
</template>

  <script>
   export default {
    data: function() {
           return {
      sidebar: false,
      menuItems: [
        { path: "/product", name: "product", title: "Product" },
        { path: "/us", name: "us", title: "Us" },
        { path: "resources", name: "resources", title: "Resources" },
        { path: "/portal", name: "login", title: "Login" }
      ]
    };
  }
};

</script>

Answer 1

应用栏怎么样？ v-menu 标签支持下拉 https://vuetifyjs.com/en/components/app-bars/#dense