Dropdown | uiv

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.

<template>
  <div class="uiv">
    <dropdown ref="dropdown">
      <btn type="primary" class="dropdown-toggle"
        >Dropdown <span class="caret"></span
      ></btn>
      <template slot="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 slot="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>

# 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 slot="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>

# 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 slot="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>

# 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 slot="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 slot="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 slot="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>

<template>
  <div class="uiv">
    <navbar>
      <a slot="brand" class="navbar-brand" role="button">Brand</a>
      <template slot="collapse">
        <navbar-nav>
          <dropdown tag="li">
            <a class="dropdown-toggle" role="button"
              >Dropdown 1<span class="caret"></span
            ></a>
            <template slot="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 slot="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>
        <navbar-nav right>
          <dropdown tag="li">
            <a class="dropdown-toggle" role="button"
              >Dropdown 3<span class="caret"></span
            ></a>
            <template slot="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>
      </template>
    </navbar>
  </div>
</template>

# 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 slot="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 slot="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>

# 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.

You selected: []

<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 slot="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>
export default {
  data() {
    return {
      show: false,
      ele: [],
      selected: [],
    }
  },
  mounted() {
    this.ele.push(this.$refs.dropdown.$el)
  },
}
</script>
<style scope>
.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).

← Collapse Modal →