Menus display a list of choices for the user to select. Typically, our menus originate from buttons or icons and allow the user to create, read, update and delete sections of data.
| Container(s) | .dropdown |
| Required | .dropdown-menu |
| Modifiers | .btn-dropdown .btn-dropdown-icon .has-icon .rotate-icon |
| HTML Elements | a.dropdown-link |
| <div class="btn-list"> | |
| <div class="btn btn-primary btn-dropdown dropdown"> | |
| Primary Dropdown | |
| <ul class="dropdown-menu"> | |
| <li><a class="dropdown-link">Add new Sender</a></li> | |
| <li><a class="dropdown-link">Add new IP</a></li> | |
| <li><a class="dropdown-link">Add new Template</a></li> | |
| </ul> | |
| </div> | |
| </div> |
| Container(s) | .dropdown |
| Required | .dropdown-menu |
| Modifiers | .btn-small .btn-dropdown .btn-dropdown-icon .has-icon .rotate-icon |
| HTML Elements | a.dropdown-link |
| <div class="btn-list"> | |
| <div class="btn btn-small btn-primary btn-dropdown dropdown"> | |
| Primary Dropdown | |
| <ul class="dropdown-menu"> | |
| <li><a class="dropdown-link">Add new Sender</a></li> | |
| <li><a class="dropdown-link">Add new IP</a></li> | |
| <li><a class="dropdown-link">Add new Template</a></li> | |
| </ul> | |
| </div> | |
| </div> |
| Container(s) | .dropdown |
| Required | .dropdown-menu |
| Modifiers | .btn-dropdown .btn-dropdown-icon .has-icon .rotate-icon |
| HTML Elements | a.dropdown-link |
| <div class="btn-list"> | |
| <div class="btn btn-secondary btn-dropdown dropdown has-icon"> | |
| <i class="sg-icon sg-icon-filter"></i> | |
| Filter Dropdown | |
| <ul class="dropdown-menu"> | |
| <li class="input-checkbox-wrap"> | |
| <input type="checkbox" id="test1"/> | |
| <label class="input-checkbox-label" for="test1"><span>All Filters</span></label> | |
| </li> | |
| <li class="input-checkbox-wrap"> | |
| <input type="checkbox" id="test1"/> | |
| <label class="input-checkbox-label" for="test1"><span class="label label-delivered">Delivered</span></label> | |
| </li> | |
| <li class="input-checkbox-wrap"> | |
| <input type="checkbox" id="test1"/> | |
| <label class="input-checkbox-label" for="test1"><span class="label label-scheduled">Unique Opens</span></label> | |
| </li> | |
| <li class="input-checkbox-wrap"> | |
| <input type="checkbox" id="test1"/> | |
| <label class="input-checkbox-label" for="test1"><span class="label label-progress">Unique Clicks</span></label> | |
| </li> | |
| <li class="input-checkbox-wrap"> | |
| <input type="checkbox" id="test1"/> | |
| <label class="input-checkbox-label" for="test1"><span class="label label-optimized">Unsubscribes</span></label> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> |