# Navbars
# Navbar - Bootstrap 4
snippet nvb
<nav class="navbar navbar-light bg-faded">
    <a class="navbar-brand" href="${3:#}">{4:Navbar}</a>
    <ul class="nav navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="${1:#}">${2:Home} <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="${1:#}">${2:Features}</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="${1:#}">${2:Pricing}</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="${1:#}">${2:About}</a>
        </li>
    </ul>
    <form class="form-inline navbar-form pull-right">
        <input class="form-control" type="text" placeholder="Search">
        <button class="btn btn-success-outline" type="submit">Search</button>
    </form>
</nav>
endsnippet

# Navbar color - Bootstrap 4
snippet nvbc
<nav class="navbar navbar-${1:dark|light} bg-${2:inverse|primary} ${3:style="background-color: #e3f2fd;"}">
    ${4:<!-- Navbar content -->}
</nav>
endsnippet

# Navbar container out - Bootstrap 4
snippet nvbconout
<div class="container">
    <nav class="navbar navbar-light bg-faded">
        <a class="navbar-brand" href="${1:#}">${2:Navbar}</a>
    </nav>
</div>
endsnippet

# Navbar container in - Bootstrap 4
snippet nvbconin
<nav class="navbar navbar-light bg-faded">
    <div class="container">
        <a class="navbar-brand" href="${1:#}">${2:Navbar}</a>
    </div>
</nav>
endsnippet

# Navbar fixed top - Bootstrap 4
snippet nvbft
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
    <a class="navbar-brand" href="${1:#}">${2:Fixed top}</a>
</nav>
endsnippet

# Navbar fixed bottom - Bootstrap 4
snippet nvbfb
<nav class="navbar navbar-fixed-bottom navbar-light bg-faded">
    <a class="navbar-brand" href="${1:#}">${2:Fixed bottom}</a>
</nav>
endsnippet

# Navbar collapse - Bootstrap 4
snippet nvbclp
<div class="collapse" id="${1:exCollapsingNavbar}">
    <div class="bg-inverse p-a">
        <h4>${2:Collapsed content}</h4>
        <span class="text-muted">${3:Toggleable via the navbar brand.}</span>
    </div>
</div>
<nav class="navbar navbar-light bg-faded">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#${1:exCollapsingNavbar}">
        &#9776;
    </button>
</nav>
endsnippet

# Navbar toggler - Bootstrap 4
snippet nvbtg
<nav class="navbar navbar-light bg-faded">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#${1:exCollapsingNavbar2}">
        &#9776;
    </button>
    <div class="collapse navbar-toggleable-xs" id="${1:exCollapsingNavbar2}">
        <a class="navbar-brand" href="#">Responsive navbar</a>
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="${2:#}">${3:Home} <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="${2:#}">${3:Features}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="${2:#}">${3:Pricing}</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="${2:#}">${3:About}</a>
            </li>
        </ul>
    </div>
</nav>
endsnippet