- ###### FILES

- Two new item submitted Marketing Manager
  17kb
- 52 Doc file Generator FontEnd Developer
  550kb
- 25 Xls File Uploaded Digital Marketing Manager
  20kb
- Anna Strong Web Designer
  37kb

- ###### MEMBERS

- John Doe UI designer
- Michal Clark FontEnd Developer
- Milena Gibson Digital Marketing
- Anna Strong Web Designer

- ###### PAGES

- error_outline No results found.

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!

- View
- Html

Drop Me!

- one
- two
- three
- view_modulefour
- cloudfive

      <!-- 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>
      </ul>

#### Options

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.

      $('.dropdown-trigger').dropdown({
      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:

      $('.dropdown-trigger').dropdown('open');

You can also close dropdowns programatically:

      $('.dropdown-trigger').dropdown('close');

add

- help_outline
- widgets
- today
- mail_outline