# Dropdown

To use the custom dropdown you need to import the custom made component: 
import {DropDown} from 'src/components'
1

Global usage

Vue.component(DropDown)
1

For local usage

export default {
  components: {
    DropDown
  }
}
1
2
3
4
5

:::warning 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 :::

# Simple

:::tip You can specify the tag that the dropdown will be rendered with through the tag prop :::

Simple 
<template>
<drop-down tag="div" title="Simple">
  <a class="dropdown-item">Notification 1</a>
  <a class="dropdown-item">Notification 2</a>
  <a class="dropdown-item">Notification 3</a>
  <a class="dropdown-item">Notification 4</a>
  <a class="dropdown-item">Another notification</a>
</drop-down>
</template>

<script>
  export default {}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13

# As button

    • <template>
<div>
  <div class="col-5">
    <drop-down>
      <n-button slot="title" type="primary" 
                class="dropdown-toggle" 
                data-toggle="dropdown"
                block round>
        Dropdown
      </n-button>
      <h6 class="dropdown-header">Dropdown header</h6>
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </drop-down>
  </div>
</div>
</template>

<script>
  export default {}
</script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

    # Expand upward

    • <template>
  <div class="row">
    <div class="col-5">
      <drop-down direction="up">
        <n-button slot="title" type="primary" 
          class="dropdown-toggle" data-toggle="dropdown"
          block round>
          Dropup
        </n-button>
        <h6 class="dropdown-header">Header</h6>
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </drop-down>
    </div>
  </div>
</template>

<script>
  export default {}
</script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21

    # Events

    Event Name Description Parameters
    change triggers when the dropdown is opened/closed the updated value

    # Slots

    Name Description
    default content for dropdown menu
    title content for dropdown title

    ****

    ← Inputs →