dropmic is a lightweight dropdown plugin written in pure javascript
- No dependencies required
- No extra files to download
- Fully customizable via CSS
- Simple API
Method | Procedure |
---|---|
Bower | bower install dropmic --save |
NPM | npm install dropmic |
Yarn (obsolete since npm5) | yarn add dropmic |
Download | Download zip |
Then dropmic have some css you will have to add (feel free to custom it for a better integration in your UI):
<link rel="stylesheet" href="dist/dropmic.min.css">
Finally just link the dropmic's code at the end of your document:
<!-- Browser build -->
<script src="dist/dropmic.min.js"></script>
Or as a JS module:
// ES6 module build
import dropmic from 'dropmic'
- Add
data-dropmic-btn
attribute to your button - Create a div with a
dropmic
css class - Add a
data-dropmic-direction
attribute to the div (default behavior:bottom-right
):
data-dropmic-direction="top-left"
data-dropmic-direction="top-right"
data-dropmic-direction="top-middle"
data-dropmic-direction="bottom-left"
data-dropmic-direction="bottom-right"
data-dropmic-direction="bottom-middle"
- You can also add a
data-dropmic
attribute to you div for target it.
Example:
<div class="dropmic" data-dropmic="42"
data-dropmic-direction="bottom-right">
<button data-dropmic-btn>click me</button>
<div class="dropmic-menu" aria-hidden="true">quality content</div>
</div>
var dropmic = new Dropmic(document.querySelector('[data-dropmic="42"]'));
You can create the content by yourself or use the API (cf. below)
Use this template (<div class="dropmic-menu" aria-hidden="true">
is needed, otherwise you can completely customize his content)
<div class="dropmic" data-dropmic="42" data-dropmic-direction="bottom-right" role="navigation">
<button data-dropmic-btn>click me</button>
<div class="dropmic-menu" aria-hidden="true">
<div class="dropmic-menu__custom">Custom content</div>
<ul class="dropmic-menu__list" role="menu">
<li class="dropmic-menu__listItem" role="menuitem">
<a class="dropmic-menu__listContent" href="http://example.com" tabindex="-1">label link</a>
</li>
<li class="dropmic-menu__listItem" role="menuitem">
<button class="dropmic-menu__listContent" tabindex="-1">label button</button>
</li>
</ul>
</div>
</div>
You can use the API to generate content and open or close your dropdown with JS:
Name | Parameter type(s) | Description |
---|---|---|
addLink(label, url) | string or int, string | Add a link |
addBtn(label, callback) | string or int, function | Add a button |
addLabel(label) | string or int | Add a text label |
setCustomContent(content) | string | Set a custom content |
updateTargetBtn(content) | string | Update target button content |
open() | Open your dropdown | |
close() | Close your dropdown |
Example:
dropmic.setCustomContent("toto custom");
dropmic.addLink('link label', 'http://example.com');
dropmic.addBtn('close dropdown', function() {
dropmic.close();
});
dropmic.addLabel('text label');
Name | Type | Description |
---|---|---|
onOpen | function | Callback to execute when dropmic is open |
onClose | function | Callback to execute when dropmic is closed |
beforeOpen | function | Callback to execute before opening dropmic |
beforeClose | function | Callback to execute before closing dropmic |
Example:
var dropmic = new Dropmic(document.querySelector('[data-dropmic="1"]'), {
onOpen: function() {
dropmic.updateTargetBtn("Click to close");
},
onClose: function() {
dropmic.updateTargetBtn("Bottom right (default)");
}
});
- Setup dependencies:
npm i
(ornpm ci
if you don't want to impact package-lock) - Run hot-reloads server for development
npm run dev
- (Build for production
npm run build
)
- Add open and close public method in the API
- Add top-middle and bottom-middle direction
- A11y friendly (with keyboard navigation)
- Permit to update button content with dropdown is open
- Instantiate severals dropmic with one initialization command
- Permit to update a list item value
Released under the MIT LICENSE