Documentation and examples for Grayshift’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
Here’s what you need to know before getting started with the navbar:
.navbar
with .navbar-expand{-sm|-md|-lg|-xl}
for responsive collapsing and color scheme classes.<nav>
element or, if using a more generic element such as a <div>
, add a role="navigation"
to every navbar to explicitly identify it as a landmark region for users of assistive technologies.aria-current="page"
for the current page or aria-current="true"
for the current item in a set.Navbars come with built-in support for a handful of sub-components. Choose from the following as needed:
.navbar-nav
for a full-height and lightweight navigation (including support for dropdowns)..navbar-toggler
for use with our collapse plugin and other navigation toggling behaviors..collapse.navbar-collapse
for grouping and hiding navbar contents by a parent breakpoint.Here’s an example of all the sub-components included in a responsive navbar that automatically collapses at the xl (extra-large) breakpoint.
<nav class="navbar navbar-expand-xl">
<div class="container">
<a class="link-body" href="#">
<svg class="gi gi-grayshift" width="3rem" height="3rem" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M4.93 4.93c3.905-3.905 10.237-3.905 14.142 0s3.905 10.237 0 14.142-10.237 3.905-14.142 0-3.905-10.237 0-14.142zM12 6.343a4 4 0 0 0-5.657 0 8 8 0 0 0 0 11.314c.58.58 1.226 1.052 1.915 1.416a4 4 0 0 1 .914-4.244h0L12 12a4 4 0 0 0 0-5.657zm4.596 8.132a1.5 1.5 0 1 0-2.121 2.121 1.5 1.5 0 1 0 2.121-2.121zM10.232 8.11a1.5 1.5 0 0 1-2.121 2.121 1.5 1.5 0 0 1 2.121-2.121z"/>
</svg>
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent" type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle Navigation">
<svg class="gi gi-menu fs-5" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6h16a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2zm0 5h16a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2zm0 5h16a1 1 0 1 1 0 2H4a1 1 0 1 1 0-2z"/>
</svg>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mb-5 mr-xl-5 mb-xl-0">
<li class="nav-item">
<a class="nav-link active" href="#" aria-current="page">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" id="navbarDropdownOne" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown<svg class="gi gi-arrow-down ml-1 align-text-top" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M10.882 16.158a2 2 0 0 0 2.565-.279l.114-.13 4-5a2 2 0 0 0-1.412-3.244L16 7.5H8a2 2 0 0 0-1.659 3.117l.097.132 4 5a2 2 0 0 0 .201.216l.112.096.132.097z"/>
</svg></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownOne">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</li>
</ul>
<form>
<div class="input-group">
<div class="input-group-item">
<svg class="gi gi-search fs-3" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path d="M11 3a8 8 0 0 1 8 8c0 1.848-.627 3.55-1.68 4.905l3.386 3.388a1 1 0 0 1-1.32 1.497l-.094-.083-3.388-3.386C14.55 18.373 12.848 19 11 19a8 8 0 1 1 0-16zm0 2a6 6 0 1 0 0 12 6 6 0 1 0 0-12z"/>
</svg>
</div>
<input class="form-control" type="search" placeholder="Search" aria-label="Search">
</div>
</form>
</div>
</div>
</nav>
This example uses spacing (mb-5, mr-xl-5, mb-xl-0) utility classes.
Navbars can utilize .navbar-toggler
, .navbar-collapse
, and .navbar-expand{-sm|-md|-lg|-xl}
classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
For navbars that never collapse, add the .navbar-expand
class on the navbar. For navbars that always collapse, don’t add any .navbar-expand
class.