Vue Argon Design System
Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.
<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>
<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>
<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>
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>