Add a dropdown list to any button. Make sure that the data-target attribute matches the id in the <ul> tag. You can add a divider with the <li class="divider"></li> tag. You can also add icons. Just add the icon inside the anchor tag.

Drop Me!

  <!-- Dropdown Trigger -->
  <a class='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
  <!-- Dropdown Structure -->
  <ul id='dropdown1' class='dropdown-content'>
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
  <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
  <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>


Option Name Description
inDuration The duration of the transition enter in milliseconds. Default: 300
outDuration The duration of the transition out in milliseconds. Default: 225
constrainWidth If true, constrainWidth to the size of the dropdown activator. Default: true
hover If true, the dropdown will open on hover. Default: false
gutter This defines the spacing from the aligned edge. Default: 0
coverTrigger If true, the dropdown will show below the activator. Default: false
alignment Defines the edge the menu is aligned to. Default: 'left'
stopPropagation If true, stops the event propagating from the dropdown origin click handler. Default: false

To use these inline you have to add them as data attributes. If you want more dynamic control, you can define them using the jQuery plugin below.

  <a class='dropdown-trigger btn' data-coverTrigger="true" href='#' data-target='dropdown1'>Drop Me!</a>

jQuery Plugin Initialization

Initialization for dropdowns is only necessary if you create them dynamically.

  inDuration: 300,
  outDuration: 225,
  constrainWidth: false, // Does not change width of dropdown to that of the activator
  hover: true, // Activate on hover
  gutter: 0, // Spacing from edge
  coverTrigger: false, // Displays dropdown below the button
  alignment: 'left', // Displays dropdown with edge aligned to the left of button
  stopPropagation: false // Stops event propagation

You can also open dropdowns programatically, the below code will make your modal open on document ready:


You can also close dropdowns programatically:

Theme Customizer

Customize & Preview in Real Time

Navbar Options

Footer Options