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