Dropdown

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

Examples

Order to decide the dropdown trigger:

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

Use v-model to indicate the dropdown status.

vue

<template>
  <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>
</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.

vue

<template>
  <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>
</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.

vue

<template>
  <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>
</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>.

vue

<template>
  <!-- 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 -->
</template>

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

vue

<template>
  <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>
</template>

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

Within pills

vue

<template>
  <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>
</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.

vue

<template>
  <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>
</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

Name	Type	Default	Description
`v-model`	Boolean		Indicate the dropdown status (show / hide).
`tag`	String	div	The HTML tag that render the dropdown component.
`append-to-body`	Boolean	false	Append the dropdown slot to body.
`dropup`	Boolean	false	Use dropup style.
`menu-right`	Boolean	false	Use dropdown-menu-right style.
`disabled`	Boolean	false	Disable the dropdown.
`not-close-elements`	Array		Pass an array of element which the dropdown will not close on click.
`position-element`	Element	this.$el	Pass an HTML element which the dropdown will be positioned by (in append-to-body mode).

Slots

Name	Description
`dropdown`	Replace as the dropdown body.
`default`	Replace as the rest of the component (e.g. trigger stuffs).

Dropdown ​

Examples ​

Alignment ​

Dropup ​

Append to body ​

Within navbar ​

Within pills ​

Advanced ​

API Reference ​