Vuetify open drop down menu center to button

I have a drop down menu with two rows of v-list items as shown below.

<v-menu
  class="dropdown"
  open-on-hover
  offset-y
>
  <template v-slot:activator="{ on, attrs }">
    <v-btn
      class="rounded-xl green darken-3 text-capitalize elevation-2 ml-2"
      dark
      v-bind="attrs"
      v-on="on"
    >
      The Society
    </v-btn>
  </template>

  <v-list class="pa-6">
    <v-list-item>
      <v-row>
        <v-col cols="12" sm="6">
          <h1 class="display-1 orange--text">Important Info</h1>
          <v-divider class="ma-3"></v-divider>
          <v-list-item><v-btn class="ml-n6" text>Our Constitution <v-icon class="ml-3">mdi-security</v-icon></v-btn></v-list-item>
          <v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
          <v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
          <v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
          <v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
        </v-col>
        <v-divider vertical></v-divider>
        <v-col cols="12" sm="6">
          <h1 class="display-1 orange--text">Important Info</h1>
          <v-divider class="ma-3"></v-divider>
          <v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
          <v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
          <v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
          <v-list-item class="body-2" to="/">Lorem ipsum.</v-list-item>
        </v-col>
      </v-row>
    </v-list-item>
  </v-list>
</v-menu>

I need this menu to open centre to the The Society button and not pushing to the right as it does presently. So the middle line of the drop down should be centre to the The Society button.

Menu Offset

1 answer

  • answered 2022-05-04 13:31 John&#39;Sters

    So it seems that there is a nudge-left api available for v-menu's. Thank you Vuetify for this amazing framework!

    My Code

    <v-menu
          open-on-hover
          nudge-left="220"
          nudge-bottom="50"
        >
    

    This looks like it solved my issue.

    Find the API here https://vuetifyjs.com/en/api/v-menu/#props

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum