How can I add custom margin to the v-list element under v-menu in vuetify

Question

there is another container that is being add by vuetify to the v-list Im trying to use as v-menu content,because of this container I can't just add a margin to my v-list and get the result I want (that is having a little space between the v-menu activator and menu body) can any one show me the right way to do this? thank you

Answer 1

I found out about a prop that can be used to attach any css class to the body of the menu : 'content-class'

<template>
  <div>
    <v-menu v-model="menu"
            content-class="menu-content"
            offset-y>
      <template v-slot:activator="{ on, attrs }">
        <v-btn v-bind="attrs"
               v-on="on" depressed>
          <v-icon>
            mdi-menu
          </v-icon>
          <span class="mr-1"> Category</span>
          <v-icon
            right
            color="#9b9b9b"
          >
            mdi-chevron-down
          </v-icon>
        </v-btn>
      </template>
            <v-list>
    <v-list-item
      v-for="(item, i) in menuArray"
      :key="i"
    >
      <v-list-item-title>{{ item.name }}</v-list-item-title>
    </v-list-item>
  </v-list>
    </v-menu>
</template>
<style lang='scss' scoped>
.menu-content {
  margin-top: 100px
}
</style>