# TODO: Add Usage form http://v4-alpha.getbootstrap.com/components/dropdowns/#usage

# Dropdown
# Dropdown - Bootstrap 4
snippet drp
<div class="dropdown open">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="${4:dropdownMenu1}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        ${3:Dropdown}
    </button>
    <div class="dropdown-menu" aria-labelledby="${4:dropdownMenu1}">
        <a class="dropdown-item" href="${1:#}">${2:Action}</a>
        <a class="dropdown-item" href="${1:#}">${2:Another action}</a>
        <a class="dropdown-item" href="${1:#}">${2:Something else here}</a>
    </div>
</div>
endsnippet

# Dropdown button elements - Bootstrap 4
snippet drpbtn
<div class="dropdown open">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="${3:dropdownMenu1}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        ${2:Dropdown}
    </button>
    <div class="dropdown-menu" aria-labelledby="${3:dropdownMenu1}">
        <button class="dropdown-item" type="button">{$1:Action}</button>
        <button class="dropdown-item" type="button">{$1:Another action}</button>
        <button class="dropdown-item" type="button">{$1:Something else here}</button>
    </div>
</div>
endsnippet

# Dropdown Alignement - Bootstrap 4
snippet drpagm
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="${2:dLabel}">
    ${1:...}
</div>
endsnippet

# Dropdown menu header - Bootstrap 4
snippet drpmh
<div class="dropdown-menu">
    <h6 class="dropdown-header">${3:Dropdown header}</h6>
    <a class="dropdown-item" href="${1:#}">${2:Action}</a>
    <a class="dropdown-item" href="${1:#}">${2:Another action}</a>
</div>
endsnippet

# Dropdown menu divides - Bootstrap 4
snippet drpmdv
<div class="dropdown-menu">
    <a class="dropdown-item" href="${1:#}">${2:Action}</a>
    <a class="dropdown-item" href="${1:#}">${2:Another action}</a>
    <a class="dropdown-item" href="${1:#}">${2:Something else here}</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="${1:#}">${2:Separated link}</a>
</div>
endsnippet

# Dropdown menu disabled - Bootstrap 4
snippet drpmds
<div class="dropdown-menu">
    <a class="dropdown-item" href="${1:#}">${2:Regular link}</a>
    <a class="dropdown-item disabled" href="${1:#}">${2:Disabled link}</a>
    <a class="dropdown-item" href="${1:#}">${2:Another link}</a>
</div>
endsnippet