@@include('./parts/head.html', { "plugin_fa_icons": true, "plugin_mdi_icons": true, "plugin_ion_icons": true, "plugin_wi_icons": true, "plugin_rickshaw": false, "plugin_nvd3": false, "plugin_flot": false, "plugin_sparkline": false, "plugin_markitup": false, "plugin_ckeditor": false, "plugin_select2": false, "plugin_dropzone": false, "plugin_tagsinput": false, "plugin_clockpicker": false, "plugin_pikaday": false, "plugin_spectrum": false, "plugin_inputmask": false, "plugin_parsley": false, "plugin_gmaps": false, "plugin_jvectormap": false, "plugin_datatables": false, "plugin_fullcalendar": false, "plugin_simpleweather": false, "plugin_prettify": true }) @@include('./parts/top-navbar.html') @@include('./parts/sidebar.html', { "page": "ui-dropdown", "classes": "yay-shrink yay-hide-to-small yay-gestures" })
@@include('./parts/title.html', { "title": "Dropdown", "crumbs": "
  • Dashboard
  • UI
  • Dropdown
    • " })
    Add a dropdown list to any button. Make sure that the data-activates attribute matches the id in the <ul> tag.

    Basic

    You can add a divider with the <li class="divider"></li> tag.

    Press Me! 
    <!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='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>
</ul>

    Button Group Dropdown

    You can use button groups for drop-down.

    Just Button 
    <!-- Dropdown Trigger -->
<div class="div btn-group">
  <a href="#!" class="waves-effect waves-light btn">Just Button</a>
  <a href="#!" class="waves-effect waves-light btn dropdown-button" data-activates='dropdown2'><span class="mdi-navigation-expand-more"></span></a>
</div>

<!-- Dropdown Structure -->
<ul id='dropdown2' 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>
</ul>

    Options

    The default behavior of dropdown is to activate on click. To have it activate on a hover, you can pass that as an option in HTML as shown below.

    Hover Me! 
    <a class='dropdown-button btn' data-constrainwidth="false" data-hover="true" data-induration="500" data-outduration="300" href='#' data-activates='dropdown1'>Drop Me!</a>
    @@include('./parts/search-bar.html') @@include('./parts/chat.html') @@include('./parts/foot.html', { "copyright": true })