Dropdowns

<!-- Dropdown example 1 -->
<div class="dropdown-menu">
  <a href="#" class="dropdown-item">Regular link</a>
  <a href="#" class="dropdown-item">Another regular link</a>
  <a href="#" class="dropdown-item active">Active link</a>
  <a href="#" class="dropdown-item disabled">Disabled link</a>
</div>

<!-- Dropdown example 2 -->
<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a href="#" class="dropdown-item">Action</a>
  <a href="#" class="dropdown-item">Another action</a>
  <div class="dropdown-divider"></div>
  <a href="#" class="dropdown-item">Separeted link</a>
</div>

<!-- Dropdown example 3 -->
<div class="dropdown-menu">
  <a href="#" class="dropdown-item">
    <i data-feather="home"></i>
    Regular link
    <span class="badge badge-pill badge-secondary ml-2">2</span>
  </a>
  <a href="#" class="dropdown-item">
    <i data-feather="user"></i>
    Profile
    <span class="badge badge-pill badge-primary ml-2">3</span>
  </a>
  <a href="#" class="dropdown-item">
    <i data-feather="message-square"></i>
    Messages
    <span class="badge badge-pill badge-success ml-2">5</span>
  </a>
  <a href="#" class="dropdown-item">
    <i data-feather="settings"></i>
    Settings
    <span class="badge badge-pill badge-warning ml-2">1</span>
  </a>
</div>

// Dropdown example 1
.dropdown-menu
  a(href="#").dropdown-item
    | Regular link
  a(href="#").dropdown-item
    | Another regular link
  a(href="#").dropdown-item.active
    | Active link
  a(href="#").dropdown-item.disabled
    | Disabled link

// Dropdown example 2
.dropdown-menu
  h6.dropdown-header
    | Dropdown header
  a(href="#").dropdown-item
    | Action
  a(href="#").dropdown-item
    | Another action
  .dropdown-divider
  a(href="#").dropdown-item
    | Separated link

// Dropdown example 3
.dropdown-menu
  a(href="#").dropdown-item
    i(data-feather="home")
    | Home
    span.badge.badge-pill.badge-secondary.ml-2
      | 2
  a(href="#").dropdown-item
    i(data-feather="user")
    | Profile
    span.badge.badge-pill.badge-primary.ml-2
      | 3
  a(href="#").dropdown-item
    i(data-feather="message-square")
    | Messages
    span.badge.badge-pill.badge-success.ml-2
      | 5
  a(href="#").dropdown-item
    i(data-feather="settings")
    | Settings
    span.badge.badge-pill.badge-warning.ml-2
      | 1

<!-- Forms inside dropdown -->
<div class="dropdown-menu">
  <form class="p-4">
    <div class="form-group">
      <label for="exampleDropdownFormEmail">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail" placeholder="email@example.com" required>
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword" placeholder="Password" required>
    </div>
    <div class="form-group">
      <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="dropdownCheck">
        <label for="dropdownCheck" class="custom-control-label">Remember me</label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign In</button>
  </form>
</div>

// Forms inside dropdown
.dropdown-menu(style="width: 260px;")
  form.p-4
    .form-group
      label(for="exampleDropdownFormEmail")
        | Email address
      input(type="email", id="exampleDropdownFormEmail", placeholder="email@example.com", required).form-control
    .form-group
      label(for="exampleDropdownFormPassword")
        | Password
      input(type="password", id="exampleDropdownFormPassword", placeholder="Password", required).form-control
    .form-group
      .custom-control.custom-checkbox
        input(type="checkbox", id="dropdownCheck").custom-control-input
        label(for="dropdownCheck").custom-control-label
          | Remember me
    button(type="submit").btn.btn-primary
      | Sign In

<!-- Dropdown -->
<div class="btn-group dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Action</a>
    <a href="#" class="dropdown-item">Another action</a>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">Something else here</a>
  </div>
</div>

<!-- Dropup -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Action</a>
    <a href="#" class="dropdown-item">Another action</a>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">Something else here</a>
  </div>
</div>

<!-- Dropright -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Action</a>
    <a href="#" class="dropdown-item">Another action</a>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">Something else here</a>
  </div>
</div>

<!-- Dropleft -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Action</a>
    <a href="#" class="dropdown-item">Another action</a>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">Something else here</a>
  </div>
</div>

// Dropdown
.btn-group.dropdown
  button(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false").btn.btn-primary.dropdown-toggle
    | Dropdown
  .dropdown-menu
    a(href="#").dropdown-item
      | Action
    a(href="#").dropdown-item
      | Another action
    .dropdown-divider
    a(href="#").dropdown-item
      | Something else here

// Dropup
.btn-group.dropup
  button(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false").btn.btn-primary.dropdown-toggle
    | Dropup
  .dropdown-menu
    a(href="#").dropdown-item
      | Action
    a(href="#").dropdown-item
      | Another action
    .dropdown-divider
    a(href="#").dropdown-item
      | Something else here

// Dropright
.btn-group.dropright
  button(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false").btn.btn-primary.dropdown-toggle
    | Dropright
  .dropdown-menu
    a(href="#").dropdown-item
      | Action
    a(href="#").dropdown-item
      | Another action
    .dropdown-divider
    a(href="#").dropdown-item
      | Something else here

// Dropleft
.btn-group.dropleft
  button(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false").btn.btn-primary.dropdown-toggle
    | Dropleft
  .dropdown-menu
    a(href="#").dropdown-item
      | Action
    a(href="#").dropdown-item
      | Another action
    .dropdown-divider
    a(href="#").dropdown-item
      | Something else here

<!-- Solid split button -->
<div class="btn-group">
  <button type="button" class="btn btn-primary">Button</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Outline split button -->
<div class="btn-group">
  <button type="button" class="btn btn-outline-primary">Button</button>
  <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Pill solid split button -->
<div class="btn-group">
  <button type="button" class="btn btn-pill btn-primary">Button</button>
  <button type="button" class="btn btn-pill btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Pill outline split button -->
<div class="btn-group">
  <button type="button" class="btn btn-pill btn-outline-primary">Button</button>
  <button type="button" class="btn btn-pill btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

// Solid split button
.btn-group
  button(type="button").btn.btn-primary
    | Button
  button(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false'").btn.btn-primary.dropdown-toggle.dropdown-toggle-split
    span.sr-only
      | Toggle dropdown
  .dropdown-menu
    | ...

// Outline split button
.btn-group
  button(type="button").btn.btn-outline-primary
    | Button
  button(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false'").btn.btn-outline-primary.dropdown-toggle.dropdown-toggle-split
    span.sr-only
      | Toggle dropdown
  .dropdown-menu
    | ...

// Pill solid split button
.btn-group
  button(type="button").btn.btn-pill.btn-primary
    | Button
  button(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false'").btn.btn-pill.btn-primary.dropdown-toggle.dropdown-toggle-split
    span.sr-only
      | Toggle dropdown
  .dropdown-menu
    | ...

// Pill outline split button
.btn-group
  button(type="button").btn.btn-pill.btn-outline-primary
    | Button
  button(type="button", data-toggle="dropdown", aria-haspopup="true", aria-expanded="false'").btn.btn-pill.btn-outline-primary.dropdown-toggle.dropdown-toggle-split
    span.sr-only
      | Toggle dropdown
  .dropdown-menu
    | ...