Vue Dropdowns

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.


Examples

<div>
  <base-dropdown>
    <base-button slot="title" type="secondary" class="dropdown-toggle">
      Regular
    </base-button>
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </base-dropdown>
  <base-dropdown>
     <base-button slot="title" type="default" class="dropdown-toggle">
        <img src="https://demos.creative-tim.com/argon-design-system/assets/img/icons/flags/US.png" /> Flags
     </base-button>
       <li>
          <a class="dropdown-item" href="#">
            <img src="https://demos.creative-tim.com/argon-design-system/assets/img/icons/flags/DE.png" /> Deutsch
          </a>
      </li>
      <li>
          <a class="dropdown-item" href="#">
            <img src="https://demos.creative-tim.com/argon-design-system/assets/img/icons/flags/GB.png" /> English(UK)
          </a>
      </li>
      <li>
          <a class="dropdown-item" href="#">
            <img src="https://demos.creative-tim.com/argon-design-system/assets/img/icons/flags/FR.png" /> Français
          </a>
      </li>
    </base-dropddown>
</div>

Multilevel Dropdown PRO

<base-dropdown multiLevel>
  <a role="button" class="btn btn-primary text-white" slot="title" data-toggle="dropdown">
    <span class="nav-link-inner--text">Click here</span>
  </a>
  <a class="dropdown-item" href="javascript:;">Action</a>
  <a class="dropdown-item" href="javascript:;">Another action</a>
  <a class="dropdown-item dropdown-toggle"
     :class="{ open: multiLevel }"
     @click="toggleMultiLevel">
    Submenu
  </a>
  <ul class="dropdown-menu" :class="{ show: multiLevel }">
    <a class="dropdown-item" href="#">Submenu action</a>
    <a class="dropdown-item" href="#">Submenu action</a>
    <a class="dropdown-item dropdown-toggle"
       :class="{ open: multiLevel2 }"
       @click="toggleMultiLevel2()">
      Subsubmenu
    </a>
    <ul
      class="dropdown-menu"
      :class="{ show: multiLevel2 }"
    >
      <a class="dropdown-item" href="#">Subsubmenu action 1</a>
      <a class="dropdown-item" href="#">Subsubmenu action 2</a>
    </ul>
    <a class="dropdown-item dropdown-toggle"
       :class="{ open: multiLevel3 }"
       @click="toggleMultiLevel3()">
      Second Subsubmenu
    </a>
    <ul
      class="dropdown-menu"
      :class="{ show: multiLevel3 }"
    >
      <a class="dropdown-item" href="#">Subsubmenu action 1</a>
      <a class="dropdown-item" href="#">Subsubmenu action 2</a>
    </ul>
  </ul>
</base-dropdown>
<script>
export default {
  data() {
    return {
      multiLevel: false,
      multiLevel2: false,
      multiLevel3: false
    }
  },
  methods: {
    toggleMultiLevel() {
      this.multiLevel = !this.multiLevel;
    },
    toggleMultiLevel2() {
      this.multiLevel2 = !this.multiLevel2;
      this.multiLevel3 = false;
    },
    toggleMultiLevel3() {
      this.multiLevel3 = !this.multiLevel3;
      this.multiLevel2 = false;
    }
  }
}
</script>

Dropup

<base-dropdown class="btn btn-primary" direction="up">
  <a role="button" slot="title" data-toggle="dropdown">
    <span class="nav-link-inner--text">Click me</span>
  </a>
  <a href="javascript:;" class="dropdown-item">
    <i class="ni ni-single-02"></i>
    <span>My profile</span>
  </a>
  <a href="javascript:;" class="dropdown-item">
    <i class="ni ni-settings-gear-65"></i>
    <span>Settings</span>
  </a>
  <a href="javascript:;" class="dropdown-item">
    <i class="ni ni-calendar-grid-58"></i>
    <span>Activity</span>
  </a>
  <a href="javascript:;" class="dropdown-item">
    <i class="ni ni-support-16"></i>
    <span>Support</span>
  </a>
  <div class="dropdown-divider"></div>
  <a href="javascript:;" class="dropdown-item">
    <i class="ni ni-user-run"></i>
    <span>Logout</span>
  </a>
</base-dropdown>

Colors

The best part is you can do this with any button variant, too:

<base-dropdown>
  <a role="button" class="btn btn-primary text-white dropdown-toggle" slot="title" data-toggle="dropdown">
    <span class="nav-link-inner--text">Primary</span>
  </a>
  <a class="dropdown-item" href="javascript:;">Action</a>
  <a class="dropdown-item" href="javascript:;">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</base-dropdown>

<base-dropdown>
  <a role="button" class="btn btn-secondary dropdown-toggle" slot="title" data-toggle="dropdown">
    <span class="nav-link-inner--text">Secondary</span>
  </a>
  <a class="dropdown-item" href="javascript:;">Action</a>
  <a class="dropdown-item" href="javascript:;">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</base-dropdown>


<base-dropdown>
  <a role="button" class="btn btn-success text-white dropdown-toggle" slot="title" data-toggle="dropdown">
    <span class="nav-link-inner--text">Success</span>
  </a>
  <a class="dropdown-item" href="javascript:;">Action</a>
  <a class="dropdown-item" href="javascript:;">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</base-dropdown>

<base-dropdown>
  <a role="button" class="btn btn-info text-white dropdown-toggle" slot="title" data-toggle="dropdown">
    <span class="nav-link-inner--text">Info</span>
  </a>
  <a class="dropdown-item" href="javascript:;">Action</a>
  <a class="dropdown-item" href="javascript:;">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</base-dropdown>

<base-dropdown>
  <a role="button" class="btn btn-warning text-white dropdown-toggle" slot="title" data-toggle="dropdown">
    <span class="nav-link-inner--text">Warning</span>
  </a>
  <a class="dropdown-item" href="javascript:;">Action</a>
  <a class="dropdown-item" href="javascript:;">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</base-dropdown>

<base-dropdown>
  <a role="button" class="btn btn-danger text-white dropdown-toggle" slot="title" data-toggle="dropdown">
    <span class="nav-link-inner--text">Danger</span>
  </a>
  <a class="dropdown-item" href="javascript:;">Action</a>
  <a class="dropdown-item" href="javascript:;">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</base-dropdown>