Dropdown

Add dropdown menus to nearly anything, including the navbar, tabs, and pills.

Examples

Order to decide the dropdown trigger:

  1. The element attached with data-role="trigger" inside the default slot (if exist).
  2. The element has dropdown-toggle class inside the default slot (if exist).
  3. The first element inside the default slot.

Use v-model to indicate the dropdown status.

<template>
  <div class="uiv">
    <Dropdown ref="dropdown">
      <Btn type="primary" class="dropdown-toggle"
        >Dropdown <span class="caret"></span
      ></Btn>
      <template #dropdown>
        <li><a role="button">Action</a></li>
        <li><a role="button">Another action</a></li>
        <li><a role="button">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a role="button">Separated link</a></li>
      </template>
    </Dropdown>
    <Dropdown>
      <Btn type="info">Split Button</Btn>
      <Btn type="info" class="dropdown-toggle"><span class="caret"></span></Btn>
      <template #dropdown>
        <li><a role="button">Action</a></li>
        <li><a role="button">Another action</a></li>
        <li><a role="button">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a role="button">Separated link</a></li>
      </template>
    </Dropdown>
  </div>
</template>

<script setup>
import { Dropdown, Btn } from 'uiv';
</script>

Alignment

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add menu-right to a dropdown component to right align the dropdown menu.

<template>
  <div class="uiv">
    <Dropdown menu-right>
      <Btn class="dropdown-toggle">Menu-Right <span class="caret"></span></Btn>
      <template #dropdown>
        <li><a role="button">Action</a></li>
        <li><a role="button">Another action</a></li>
        <li><a role="button">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a role="button">Separated link</a></li>
      </template>
    </Dropdown>
  </div>
</template>

<script setup>
import { Dropdown, Btn } from 'uiv';
</script>

Dropup

Dropdown menus can be changed to expand upwards (instead of downwards) by adding dropup to the dropdown component.

<template>
  <div class="uiv">
    <Dropdown dropup>
      <Btn class="dropdown-toggle">Dropup <span class="caret"></span></Btn>
      <template #dropdown>
        <li><a role="button">Action</a></li>
        <li><a role="button">Another action</a></li>
        <li><a role="button">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a role="button">Separated link</a></li>
      </template>
    </Dropdown>
  </div>
</template>

<script setup>
import { Dropdown, Btn } from 'uiv';
</script>

Append to body

Use this option to avoid influence from the parent node by appending dropdown list to <body>.

<template>
  <div class="uiv">
    <!-- dropdown with append-to-body -->
    <Dropdown append-to-body>
      <Btn class="dropdown-toggle">Dropdown <span class="caret"></span></Btn>
      <template #dropdown>
        <li><a role="button">Action</a></li>
        <li><a role="button">Another action</a></li>
        <li><a role="button">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a role="button">Separated link</a></li>
      </template>
    </Dropdown>
    <!-- dropdown with append-to-body + menu-right -->
    <Dropdown append-to-body menu-right>
      <Btn class="dropdown-toggle">Menu-Right <span class="caret"></span></Btn>
      <template #dropdown>
        <li><a role="button">Action</a></li>
        <li><a role="button">Another action</a></li>
        <li><a role="button">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a role="button">Separated link</a></li>
      </template>
    </Dropdown>
    <!-- dropdown with append-to-body + dropup -->
    <Dropdown append-to-body dropup>
      <Btn class="dropdown-toggle">Dropup <span class="caret"></span></Btn>
      <template #dropdown>
        <li><a role="button">Action</a></li>
        <li><a role="button">Another action</a></li>
        <li><a role="button">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a role="button">Separated link</a></li>
      </template>
    </Dropdown>
    <!-- dropdown-append-to-body.vue -->
  </div>
</template>

<script setup>
import { Dropdown, Btn } from 'uiv';
</script>

Within navbar


<template>
  <div class="uiv">
    <Navbar>
      <template #brand>
        <a class="navbar-brand" role="button">Brand</a>
      </template>
      <template #collapse>
        <navbar-nav>
          <Dropdown tag="li">
            <a class="dropdown-toggle" role="button"
              >Dropdown 1<span class="caret"></span
            ></a>
            <template #dropdown>
              <li><a role="button">Action</a></li>
              <li><a role="button">Another action</a></li>
              <li><a role="button">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a role="button">Separated link</a></li>
            </template>
          </Dropdown>
          <Dropdown tag="li">
            <a class="dropdown-toggle" role="button"
              >Dropdown 2<span class="caret"></span
            ></a>
            <template #dropdown>
              <li><a role="button">Action</a></li>
              <li><a role="button">Another action</a></li>
              <li><a role="button">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a role="button">Separated link</a></li>
            </template>
          </Dropdown>
        </navbar-nav>
        <NavbarNav right>
          <Dropdown tag="li">
            <a class="dropdown-toggle" role="button"
              >Dropdown 3<span class="caret"></span
            ></a>
            <template #dropdown>
              <li><a role="button">Action</a></li>
              <li><a role="button">Another action</a></li>
              <li><a role="button">Something else here</a></li>
              <li role="separator" class="divider"></li>
              <li><a role="button">Separated link</a></li>
            </template>
          </Dropdown>
        </NavbarNav>
      </template>
    </Navbar>
  </div>
</template>

<script setup>
import { Navbar, NavbarNav, Dropdown, Btn } from 'uiv';
</script>

Within pills


<template>
  <div class="uiv">
    <ul class="nav nav-pills" role="tablist">
      <li role="presentation" class="active">
        <a href="javascript:void(0)">Regular link</a>
      </li>
      <Dropdown tag="li">
        <a class="dropdown-toggle" role="button"
          >Dropdown <span class="caret"></span
        ></a>
        <template #dropdown>
          <li><a role="button">Action</a></li>
          <li><a role="button">Another action</a></li>
          <li><a role="button">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a role="button">Separated link</a></li>
        </template>
      </Dropdown>
      <Dropdown tag="li">
        <a class="dropdown-toggle" role="button"
          >Dropdown <span class="caret"></span
        ></a>
        <template #dropdown>
          <li><a role="button">Action</a></li>
          <li><a role="button">Another action</a></li>
          <li><a role="button">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a role="button">Separated link</a></li>
        </template>
      </Dropdown>
    </ul>
  </div>
</template>

<script setup>
import { Dropdown } from 'uiv';
</script>

Advanced

You can place anything you wish inside a dropdown, for example, a simple form with checkboxes:

TIP

use not-close-elements to prevent dropdown close on menu body click if needed.

<template>
  <section class="uiv">
    <Alert>You selected: {{ selected }}</Alert>
    <Dropdown
      ref="dropdown"
      v-model="show"
      :not-close-elements="ele"
      class="dropdown-form"
    >
      <Btn type="primary" class="dropdown-toggle"
        >Dropdown Form <span class="caret"></span
      ></Btn>
      <template #dropdown>
        <li class="checkbox">
          <label>
            <input v-model="selected" type="checkbox" value="Vue" /> Vue
          </label>
        </li>
        <li class="checkbox">
          <label>
            <input v-model="selected" type="checkbox" value="Bootstrap" />
            Bootstrap
          </label>
        </li>
        <li class="checkbox">
          <label>
            <input v-model="selected" type="checkbox" value="JavaScript" />
            JavaScript
          </label>
        </li>
        <li>
          <Btn block type="primary" @click="show = false">Apply</Btn>
        </li>
      </template>
    </Dropdown>
  </section>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { Alert, Dropdown, Btn } from 'uiv';

const show = ref(false);
const dropdown = ref(null);
const ele = ref([]);
const selected = ref([]);

onMounted(() => {
  ele.value.push(dropdown.value.$el);
});
</script>

<style>
.uiv .dropdown-form .dropdown-menu {
  padding: 10px;
}
</style>

API Reference

Props

NameTypeDefaultRequiredDescription
v-modelBooleanIndicate the dropdown status (show / hide).
tagStringdivThe HTML tag that render the dropdown component.
append-to-bodyBooleanfalseAppend the dropdown slot to body.
dropupBooleanfalseUse dropup style.
menu-rightBooleanfalseUse dropdown-menu-right style.
disabledBooleanfalseDisable the dropdown.
not-close-elementsArrayPass an array of element which the dropdown will not close on click.
position-elementElementthis.$elPass an HTML element which the dropdown will be positioned by (in append-to-body mode).

Slots

NameDescription
dropdownReplace as the dropdown body.
defaultReplace as the rest of the component (e.g. trigger stuffs).