Dropdowns

A Sass module for dropdown menus in RightScale apps

Source
Version
Updated
11/27/2017

Install

npm install designkit-dropdown --save

Dependencies

Examples

Basic Usage

HTML

<div class="dropdown open">
  <button class="btn btn-default dropdown-toggle" type="button">
    Dropdown Button
  </button>
  <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Example

Optional Drop up

HTML

<div class="dropup open">
  <button class="btn btn-default dropdown-toggle" type="button">
    Dropup Button
  </button>
  <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Example

Optional Dividers

HTML

<div class="dropdown open">
  <button class="btn btn-default dropdown-toggle" type="button">
    Dropdown Button
  </button>
  <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Settings</a>
  </div>
</div>

Example

Optional Headers

HTML

<div class="dropdown open">
  <button class="btn btn-default dropdown-toggle" type="button">
    Dropdown Button
  </button>
  <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <h6 class="dropdown-header">Settings</h6>
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Example

Optional Menu Title

HTML

<div class="dropdown open">
  <button class="btn btn-default dropdown-toggle" type="button">
    Dropdown Button
  </button>
  <div class="dropdown-menu">
      <div class="dropdown-title">
        <h6>Optional Menu Title</h6>
      </div>
      <div class="dropdown-body">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
  </div>
</div>

Example

Optional Scroll

HTML

<div class="dropdown open">
  <button class="btn btn-default dropdown-toggle" type="button">
    Dropdown Button
  </button>
  <div class="dropdown-menu dropdown-menu-scrollable">
    <div class="dropdown-body">
      <h6 class="dropdown-header">Actions</h6>
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <h6 class="dropdown-header">Years</h6>
      <a class="dropdown-item"href="#">1998</a>
      <a class="dropdown-item"href="#">1997</a>
      <a class="dropdown-item"href="#">1996</a>
      <a class="dropdown-item"href="#">1997</a>
      <a class="dropdown-item"href="#">1994</a>
      <a class="dropdown-item"href="#">1998</a>
      <a class="dropdown-item"href="#">1997</a>
      <a class="dropdown-item"href="#">1996</a>
      <a class="dropdown-item"href="#">1997</a>
      <a class="dropdown-item"href="#">1994</a>
    </div>
  </div>
</div>

Example

Select Menu

HTML

<div class="dropdown open">
  <button class="btn btn-default dropdown-toggle" type="button">
    Dropdown Button
  </button>
  <div class="dropdown-menu dropdown-menu-select">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

Example

Filter Menu

HTML

<div class="dropdown open">
  <button class="btn btn-default dropdown-toggle" type="button">
    Dropdown Button
  </button>
  <div class="dropdown-menu dropdown-menu-filter">
    <div class="dropdown-filter">
      <input id="my_input" class="form-control" type="text" name="name" value="" placeholder="Filter">
    </div>
    <div class="dropdown-body">
      <a class="dropdown-item"href="#">1998</a>
      <a class="dropdown-item"href="#">1997</a>
      <a class="dropdown-item"href="#">1996</a>
      <a class="dropdown-item"href="#">1997</a>
      <a class="dropdown-item"href="#">1994</a>
      <a class="dropdown-item"href="#">1998</a>
      <a class="dropdown-item"href="#">1997</a>
      <a class="dropdown-item"href="#">1996</a>
      <a class="dropdown-item"href="#">1997</a>
      <a class="dropdown-item"href="#">1994</a>
      <a class="dropdown-item"href="#">1993</a>
      <a class="dropdown-item"href="#">1992</a>
    </div>
  </div>
</div>

Example

Multiple Menu Options

HTML

<div class="dropdown open">
  <button class="btn btn-default dropdown-toggle" type="button">
    Dropdown Button
  </button>
  <div class="dropdown-menu dropdown-menu-select dropdown-menu-filter dropdown-menu-scrollable dropdown-menu-left">
    <div class="dropdown-title">
      <h6>Optional Menu Title</h6>
    </div>
    <div class="dropdown-filter">
      <input id="my_input" class="form-control" type="text" name="name" value="" placeholder="Filter">
    </div>
    <div class="dropdown-body">
      <h6 class="dropdown-header">Actions</h6>
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <h6 class="dropdown-header">Years</h6>
      <a class="dropdown-item"href="#">1998</a>
      <a class="dropdown-item"href="#">1997</a>
      <a class="dropdown-item"href="#">1996</a>
      <a class="dropdown-item"href="#">1997</a>
      <a class="dropdown-item"href="#">1994</a>
      <a class="dropdown-item"href="#">1998</a>
      <a class="dropdown-item"href="#">1997</a>
      <a class="dropdown-item"href="#">1996</a>
      <a class="dropdown-item"href="#">1997</a>
      <a class="dropdown-item"href="#">1994</a>
    </div>
  </div>
</div>

Example

CSS