---
layout: default
title: Dropdowns · Ghost UI
---

<header class="page-header">
    <a class="menu-button" href="#"><span class="sr-only">Menu</span></a>
    <h2>Dropdowns</h2>
</header>

<section class="page-content">

    <h1>Dropdowns</h1>

    <div style="height: 200px;">
        <div class="dropdown">
          <ul class="dropdown-menu dropdown-triangle-top" role="menu" aria-labelledby="dropdownMenu1" style="display: block;">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
          </ul>
        </div>

        <div class="dropdown">
          <ul class="dropdown-menu dropdown-menu-right dropdown-triangle-top-right" role="menu" aria-labelledby="dropdownMenu1" style="display: block;">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation" class="divider"></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
          </ul>
        </div>
    </div>

    <h2>Triangle Variations</h2>

    {% assign dropdown_classes = "dropdown-triangle-top|dropdown-triangle-top-left|dropdown-triangle-top-right|dropdown-triangle-bottom|dropdown-triangle-bottom-left|dropdown-triangle-bottom-right" | split: "|" %}
    {% for item in dropdown_classes  %}
        <p><b>Variation: <code>{{item}}</code></b></p>
        <div class="dropdown" style="height: 110px;">
          <ul class="dropdown-menu {{item}}" role="menu" aria-labelledby="dropdownMenu1" style="display: block; position: relative; top: 0;">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
          </ul>
        </div>
    {% endfor %}

</section>