Dropdown

Usage

In order to use dropdowns you need to have an element that triggers showing/hiding of the dropdown menu. It can be a button or an a or any element and you need to add .drop-toggle class to it. Then right after your trigger element you need to add the following markup.

      <ul class="cdt-drop-menu rounded">
  <li class='cdt-menu-item'>
    Item 1
  </li>
  <li class='cdt-menu-item'>
    Item 2
  </li>
</ul>  

Note that the dropdown is an unordered list ul with the class .cdt-drop-menu

You can add 2 classes to make it visually different; rounded to make the corners of the menu round and also border to add border lines between the items in the menu.

Note: Dropdown menus can use the same layout as Kodhus lists as well if you need to add Avatar and extra items. Take a look at examples section to see how it's done.

Examples

A very common usage of dropdown menu is in navigation menus. Let's take a look at an example (Click on Prototypes):