---
layout: raw
title: Dropdowns - Ghost UI
---

<!--
    .dropdown
    This is used to show, hide and position the dropdown
-->

<h1>Dropdowns</h1>

<p>Basic usage notes</p>

<ul>
    <li>The styles should be markup-independent, so you can use divs, lists, and so on.</li>
    <li>Add the class <code>.dropdown-with-icons</code> to <code>.dropdown-menu</code> is you will be using icons in the dropdown items.</li>
</ul>

<hr>

<h2>Dropdown with Icons</h2>

<div class="dropdown">
  <ul class="dropdown-top dropdown-with-icons" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a class="dropdown-item icon-trash" role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation">
        <span class="divider"></span>
    </li>
    <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

<hr>

{% assign dropdown_classes = "dropdown-top|dropdown-top-left|dropdown-top-right|dropdown-bottom|dropdown-bottom-left|dropdown-bottom-right" | split: "|" %}
{% for item in dropdown_classes  %}
    <h2>Sample: <code>{{item}}</code></h2>
    <div class="dropdown">
        <ul class="{{item}}" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a class="dropdown-item" role="menuitem" tabindex="-1" href="#">Another action</a></li>
        </ul>
    </div>
{% endfor %}