@mekari/mekari-ui-vue/src/components/Dropdown/stories/content/DropdownIntroduction.mdx

--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import

> Available since version: `1.0.0`

> Styling from Mekari UI Toolkit that must be used on this component are (or with its `.scss`):
> - `./css/components/reboot-bootstrap`
> - `./css/utilities/utilities`
> - `./css/components/mekari-ui-dropdown`

Dropdown component uses [Popper.js](https://popper.js.org/) to set the position of the dropdown relatively to dropdown activator (commonly button that activate the dropdown). The detail of styling can be seen on [dropdown component styleguide](http://mekari-ui.sleekr.id/docs/1.0/components/dropdown/). Dropdown can be placed on `top`, `right`, `bottom` and `left` of the dropdown activator, and can be triggered using `mousedown` event.
You need to use its plugin from Dropdown component to be able to use Dropdown component with full of its feature. Here is how it must be imported:
```js
// on your main.js or app.js or whatever you called it.
// Before mounting the component, you need to use the dropdown plugin like this:

import Vue from 'vue'; // this is your local vue
import { MDropdownPlugin } from `@mekari/mekari-ui-vue`;

Vue.use(MDropdownPlugin);

// On your component, you can import the components from Dropdown like this:
import {
  MDropdown,
  MDropdownItem,
  MDropdownMenu,
  MDropdownSearch,
  MDropdownTrigger
} from '@mekari/mekari-ui-vue';
```