Dropdown:

<div class="dropdown-menu dropdown-anchor-top-left dropdown-has-anchor" id="dropdown-standard">
<ul>
	<li><a href="#">Item 1</a>></li>
	<li><a href="#">Item 2</a></li>
	<li class="divider"></li>
	<li><a href="#">Item 3</a></li>
</ul>
</div>

Trigger:

<button data-dropdown="#dropdown-standard">Try out!</button>

Dropdown:

<div class="dropdown-menu dropdown-anchor-top-left dropdown-has-anchor" id="dropdown-with-icons">
<ul>
	<li><a href="#"><svg>...</svg> Item 1</a>></li>
	<li><a href="#"><svg>...</svg> Item 2</a></li>
	<li class="divider"></li>
	<li><a href="#"><svg>...</svg> Item 3</a></li>
</ul>
</div>

Trigger:

<button data-dropdown="#dropdown-with-icons">Try out!</button>

Dropdown:

<div class="dropdown-menu dropdown-anchor-top-left dropdown-has-anchor dark" id="dropdown-dark-with-icons">
<ul>
	<li><a href="#"><svg>...</svg> Item 1</a>></li>
	<li><a href="#"><svg>...</svg> Item 2</a></li>
	<li class="divider"></li>
	<li><a href="#"><svg>...</svg> Item 3</a></li>
</ul>
</div>

Trigger:

<button data-dropdown="#dropdown-dark-with-icons">Try out!</button>

Dropdown:

<div class="dropdown-menu dropdown-anchor-left-center dropdown-has-anchor" id="dropdown-standard">
<ul>
	<li><a href="#">Item 1</a>></li>
	<li><a href="#">Item 2</a></li>
	<li class="divider"></li>
	<li><a href="#">Item 3</a></li>
</ul>
</div>

Trigger:

<button data-dropdown="#dropdown-left-center">Try out!</button>

Dropdown:

<div class="dropdown-menu dropdown-anchor-top-left" id="dropdown-no-anchor-html">
<p>I am <b>HTML</b>-<i>Content</i>.</p>

<button>And a button!</button>
</div>

Trigger:

<button data-dropdown="#dropdown-no-anchor-html">Try out!</button>

Note: For dropdowns without anchor you still specify where the anchor would be normally but leave out dropdown-has-anchor.