Material Design More Option Dropdown Menu


Material design uses vertical 3 dots icon across platforms to show more options. Primarily used to show secondary options. As you have seen these 3 dots on many websites now a days or most popular apps it simply displays more options or you can say secondary options. menu.js is a very compact jQuery plugin for creating a Material Design inspired dropdown / toggle menu that allows to choose more options.

ntegrate Material Design More Option Dropdown Menu


Include required plugins JS (menu.min.js) and CSS (menu.min.css) libraries on page with jquery latest library.

<link rel="stylesheet" href="menu.min.css" type="text/css">
<script src="//"></script>
<script src="menu.min.js"></script>


Create a more option dropdown menu toggle link.

<a href="javascript:;" class="toggle right" id="menu-toggle2">
    <i class="material-icons">more_vert</i>

Now create an HTML unordered list with more action/options you need.

    data-menu-toggle="#menu-toggle1, #menu-toggle2"
      <a href="#">View</a>
      <a href="#">Edit </a>
      <a href="#">Delete</a>
   <li class="menu-separator"></li>
      <a href="#">Print</a>
      <a href="#">Download</a>


Finally call the plugin and make your menu actionable.


See live demo and download source code.


See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.