Dropdown

Drop downs are contextual menus that provide multiple choices on a temporary surface.

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. 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.


Take a look at the following example (Prototypes is a dropdown item):

Examples

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



As it's mentioned in the usage section, you can utilize kodhus list .cdt-list structure to add avatar and extra items: