Vue Dropdowns

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

Examples

Action Another action Something else here
Flags
Copy
<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

Action Another action Submenu
Submenu action Submenu action Subsubmenu
Subsubmenu action 1 Subsubmenu action 2
Second subsubmenu
Subsubmenu action 1 Subsubmenu action 2
Copy
<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>
Copy
<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

My profile Settings Activity Support
Logout
Copy
<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:

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Copy
<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>