Accessible Custom Dropdown Menu – dropmic

Category: Javascript , Menu & Navigation | January 18, 2020
Views Total:989 views
Official Page:Go to website
Last Update:January 18, 2020


Accessible Custom Dropdown Menu – dropmic


dropmic is a tiny, zero-dependency JS library that appends a minimal clean dropdown/popup menu to any element when triggered.

How to use it:

Load the dropmic’s style sheet in the header that will provide the default CSS styles for the dropdown menu.

<link rel="stylesheet" href="/dropmic.css">

Create a default dropdown menu that will appear at the ‘bottom right’ of the trigger button.

<span class="dropmic" data-dropmic="1" role="navigation">
  <button data-dropmic-btn>Bottom right (default)</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" tabindex="-1" href="">label link</a>
        <li class="dropmic-menu__listItem" role="menuitem">
            <button class="dropmic-menu__listContent" tabindex="-1">button</button>

Initialize the dropdown menu and done.

var dropmic = new Dropmic(document.querySelector('[data-dropmic="1"]'));

Add custom links to the dropdown menu.

dropmic.addLink('link 1', '')

Set custom content dynamically:

dropmic.setCustomContent("Custom content");

Close the dropdown menu manually:


Set the direction of the dropdown menu using HTML attributes as shown below:

<span class="dropmic" data-dropmic="2" data-dropmic-direction="bottom-left">
  <button data-dropmic-btn>Bottom left</button>
<span class="dropmic" data-dropmic="3" data-dropmic-direction="bottom-middle">
  <button data-dropmic-btn>Bottom middle</button>
<span class="dropmic" data-dropmic="4" data-dropmic-direction="top-middle">
  <button data-dropmic-btn>Top middle</button>
<span class="dropmic" data-dropmic="5" data-dropmic-direction="top-left">
  <button data-dropmic-btn>Top left</button>
<span class="dropmic" data-dropmic="6" data-dropmic-direction="top-right">
  <button data-dropmic-btn>Top right</button>

Callback functions:

var dropmic = new Dropmic(document.querySelector('[data-dropmic="1"]'),{
    onOpen: function(){},
    onClose: function(){},
    beforeOpen: function(){},
    beforeClose: function(){},

More API methods.

// adds a new button
dropmic.addBtn(label, callback)
// adds a new label
// sets custom content
// updates target button
// opens the dropdown


v0.3.3 (01/18/2020)

  • Use template strings in html constructors


  • Permit to update target button content

You Might Be Interested In:

Leave a Reply