patternfly
Version:
This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.
50 lines (48 loc) • 2.25 kB
HTML
---
categories: [Widgets]
layout: page
title: Dropdowns
resource: true
---
<h2>Dropdown</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<h2>Dropup</h2>
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
<h2>Dropdown Kebab</h2>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-2">
{% include widgets/kebab.html dropmenuType="dropdown" dropmenuId="dropdownKebab" dropmenuVariation="dropdown-kebab-pf" %}
{% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="pull-right" dropmenuId="dropdownKebabRight" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
</div>
</div>
<h2>Dropup Kebab</h2>
<div class="row">
<div class="col-xs-6 col-sm-4 col-md-2">
{% include widgets/kebab.html dropmenuType="dropup" dropmenuId="dropupKebab" dropmenuVariation="dropdown-kebab-pf" %}
{% include widgets/kebab.html dropmenuType="dropup" dropmenuPosition="pull-right" dropmenuId="dropupKebabRight1" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
</div>
</div>