You have arrived
Nav Bar
To assist our users in navigation when using our website we are leveraging Bootstrap’s powerful, responsive navigation header, the navbar.
Accessibility
Ensure accessibility by using a 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. The color of the Nav is always GATOR75 #8C8954. The type and icons on the Nav bar are in NGNW #F2F2F2
Responsive behaviours
The Nav bar feature is responsive by default and can easily
modify them to change that. Responsive behaviour depends on our
Collapse JavaScript plugin
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.
Usage
The Nav bar is an essential element of any website or application and should be leveraged at all times. For usage examples see the homepage or project page patterns
Code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>