# Dropdown

To use the custom dropdown you don't need to import the custom made component because it's global registered, so you can use it like this:

# As List Item 


    • <template>
  <div class="md-layout">
    <div class="md-layout-item md-size-50 md-small-size-100">
      <drop-down direction="down" multiLevel>
        <md-button slot="title" class="md-button md-success md-round md-block dropdown-toggle" data-toggle="dropdown">
          Multilevel Dropdown
        </md-button>
        <ul class="dropdown-menu" :class="{'dropdown-menu-right': responsive}">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another Action</a></li>
          <li>
            <a class="dropdown-toggle" :class="{'open': multiLevel}" @click="toggleMultiLevel">Submenu</a>
            <ul class="dropdown-menu" >
              <li><a href="#">Submenu action</a></li>
              <li><a href="#">Submenu action</a></li>
              <li>
                <a class="dropdown-toggle" :class="{'open': multiLevel2}" @click="toggleMultiLevel2()">Subsubmenu</a>
                <ul class="dropdown-menu" :class="{'dropdown-menu-right': responsive}">
                  <li><a href="#">Subsubmenu action 1</a></li>
                  <li><a href="#">Subsubmenu action 2</a></li>
                </ul>
              </li>
              <li>
                <a class="dropdown-toggle" :class="{'open': multiLevel3}" @click="toggleMultiLevel3">Second Subsubmenu</a>
                <ul class="dropdown-menu" :class="{'dropdown-menu-right': responsive}">
                  <li><a href="#">Subsubmenu action 1</a></li>
                  <li><a href="#">Subsubmenu action 2</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </drop-down>
    </div>
    <div class="md-layout-item md-size-50 md-small-size-100">
      <div class="md-list">
        <li class="md-list-item">
          <a href="javascript:void(0)" class="md-list-item-router md-list-item-container md-button-clean dropdown">
            <div class="md-list-item-content">
              <drop-down direction="down">
                <md-button slot="title" class="md-button md-button-link md-simple dropdown-toggle" data-toggle="dropdown">
                  <i class="material-icons">apps</i>
                  <p>Components</p>
                </md-button>
                <ul class="dropdown-menu dropdown-with-icons">
                  <li>
                    <a href="javascript:void(0)">
                      <i class="material-icons">layers</i>
                      <p>All Components</p>
                    </a>
                  </li>
                  <li>
                    <a href="javascript:void(0)">
                      <i class="material-icons">content_paste</i>
                      <p>Documentation</p>
                    </a>
                  </li>
                </ul>
              </drop-down>
            </div>
          </a>
        </li>
      </div>
    </div>
  </div>

  <props-table component-name="drop-down"></props-table>
</template>

    Note: Drop-down uses a click outside directive internally. You will get a warning if the directive is not imported. You can find the declaration of this directive in src/globalDirectives.js

    Name Description
    title Content for dropdown title

    ← Inputs →