dropdowns.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>
      <h2>Dropdown Kebab with Buttons</h2>
      <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-2">
          <button type="button" class="btn btn-default">Button</button>
          <button type="button" class="btn btn-default">Button</button>
          {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="btn-group" dropmenuId="dropdownKebabGroup" dropmenuVariation="dropdown-kebab-pf" %}
        </div>
      </div>
      <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-2">
          <button type="button" class="btn btn-default">Button</button>
          <button type="button" class="btn btn-default">Button</button>
          {% include widgets/kebab.html dropmenuType="dropdown" dropmenuPosition="btn-group" dropmenuId="dropdownKebabGroupRight" dropdownPosition="dropdown-menu-right" dropmenuVariation="dropdown-kebab-pf" %}
        </div>
      </div>