oa/documentation/dropdown/dropdown-modern-documentation.md

Modern Dropdown

If you add in some specific markup, <VDropdown /> buttons can be enhanced into modern dropdowns with an animated caret icon. Use the modern prop on the component.

<template>
  <VDropdown title="Modern dropdown" modern>
    <template #content>
      <a href="#" class="dropdown-item"> Dropdown item </a>
      <a href="#" class="dropdown-item"> Other dropdown item </a>
      <a href="#" class="dropdown-item is-active"> Active dropdown item </a>
      <a href="#" class="dropdown-item"> Other dropdown item </a>
      <hr class="dropdown-divider">
      <a href="#" class="dropdown-item"> With a divider </a>
    </template>
  </VDropdown>
</template>

Dropdown item Other dropdown item Active dropdown item Other dropdown item

---

With a divider Dropdown item Other dropdown item Active dropdown item Other dropdown item

---

With a divider