# TODO: Add Usage form http://v4-alpha.getbootstrap.com/components/navs/#javascript-behavior

# Navs
# Nav - Bootstrap 4
snippet nav
<ul class="nav">
    <li class="nav-item">
        <a class="nav-link" href="${1:#}">${2:Link}</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="${1:#}">${2:Link}</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="${1:#}">${2:Another link}</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="${1:#}">${3:Disabled}</a>
    </li>
</ul>
endsnippet

# Nav inline - Bootstrap 4
snippet navin
<nav class="nav">
    <a class="nav-link active" href="${1:#}">${2:Active}</a>
    <a class="nav-link" href="${1:#}">${2:Link}</a>
    <a class="nav-link" href="${1:#}">${2:Another link}</a>
    <a class="nav-link disabled" href="${1:#}">${3:Disabled}</a>
</nav>
endsnippet

# Nav tabs - Bootstrap 4
snippet navtb
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a href="${1:#}" class="nav-link active">${2:Active}</a>
    </li>
    <li class="nav-item">
        <a href="${1:#}" class="nav-link">${2:Link}</a>
    </li>
    <li class="nav-item">
        <a href="${1:#}" class="nav-link">${2:Another link}</a>
    </li>
    <li class="nav-item disabled">
        <a href="${1:#}" class="nav-link">${3:Disabled}</a>
    </li>
</ul>
endsnippet

# Nav pills - Bootstrap 4
snippet navpl
<ul class="nav nav-pills">
    <li class="nav-item">
        <a href="${1:#}" class="nav-link active">${2:Active}</a>
    </li>
    <li class="nav-item">
        <a href="${1:#}" class="nav-link">${2:Link}</a>
    </li>
    <li class="nav-item">
        <a href="${1:#}" class="nav-link">${2:Another link}</a>
    </li>
    <li class="nav-item">
        <a href="${1:#}" class="nav-link disabled">${3:Disabled}</a>
    </li>
</ul>
endsnippet

# Nav pills stacked - Bootstrap 4
snippet navplsk
<ul class="nav nav-pills nav-stacked">
    <li class="nav-item">
        <a href="${1:#}" class="nav-link active">${2:Active}</a>
    </li>
    <li class="nav-item">
        <a href="${1:#}" class="nav-link">${2:Link}</a>
    </li>
    <li class="nav-item">
        <a href="${1:#}" class="nav-link">${2:Another link}</a>
    </li>
    <li class="nav-item">
        <a href="${1:#}" class="nav-link disabled">${3:Disabled}</a>
    </li>
</ul>
endsnippet

# Nav tabs w/ dropdown - Bootstrap 4
snippet navtbdd
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a href="${1:#}" class="nav-link active">${2:Active}</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="${3:#}">${4:Action}</a>
            <a class="dropdown-item" href="${3:#}">${4:Another action}</a>
            <a class="dropdown-item" href="${3:#}">${4:Something else here}</a>
            ${5:<div class="dropdown-divider"></div>}
            <a class="dropdown-item" href="${3:#}">${4:Separated link}</a>
        </div>
    </li>
    <li class="nav-item">
        <a href="${1:#}" class="nav-link">${2:Another link}</a>
    </li>
    <li class="nav-item">
        <a href="${1:#}" class="nav-link disabled">${2:Disabled}</a>
    </li>
</ul>
endsnippet

# Nav pills w/ dropdown - Bootstrap 4
snippet navpldd
<ul class="nav nav-pills">
    <li class="nav-item">
        <a href="${1:#}" class="nav-link active">${2:Active}</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="${3:#}" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="${3:#}">${4:Action}</a>
            <a class="dropdown-item" href="${3:#}">${4:Another action}</a>
            <a class="dropdown-item" href="${3:#}">${4:Something else here}</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="${3:#}">${4:Separated link}</a>
        </div>
    </li>
    <li class="nav-item">
        <a href="${1:#}" class="nav-link">${2:Another link}</a>
    </li>
    <li class="nav-item">
        <a href="${1:#}" class="nav-link disabled">${2:Disabled}</a>
    </li>
</ul>
endsnippet