Navbar
Navbars allow users to move around digital products.
On this page:
Best Practice
- Navbars contain links to either another page in the digital product or parts of the current page.
- Tailor them to your agency’s needs by changing some aspects of their appearance.
- Do not remove the word “Menu” from the button that expands the navigation .
- If you emphasize a link, make sure it is either the first or last link in the list.
Usage
Brand Minimal Navigation
- Directs users to a single action
- This may be used on a landing page or a single-page website
<nav class="navbar navbar-minimal">
<div class="container">
<a class="brand-link" href="#">
<div class="brand-logo mb-0"><img src="/img/ots-logo.png" class="img-fluid" alt="Office of Technology Services Logo">
</div>
</a>
</div>
</nav>
Basic Navigation
- Presents 3 - 5 links to the user
- Contains one visually-emphasized link
- If you emphasize a link, make sure it is either the first or last link in the list
<nav class="navbar navbar-basic">
<div class="container">
<a class="brand-link" href="#">
<div class="brand-logo mb-0"><img src="/img/ots-logo.png" class="img-fluid" alt="Office of Technology Services Logo">
</div>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigationItems" data-bs-toggle="collapse" data-bs-target="#navigationItems"
aria-controls="navigationItems" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon fas fa-bars me-1" aria-hidden="true"></span>Menu
</button>
<div class="collapse navbar-collapse" id="navigationItems">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Text Link <span class="visually-hidden">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Text Link</a>
</li>
<li class="nav-item">
<a class="btn btn-white" href="#">Prominent Link</a>
</li>
</ul>
</div>
</div>
</nav>
Iconic Links Navigation
- Well-suited for pages behind a login of a web application
- Displays an agency logo
- Features a set of links composed of an Icon over text
<nav class="navbar navbar-iconic">
<div class="container">
<a class="brand-link" href="#">
<div class="brand-logo"><img src="/img/ots-logo.png" class="img-fluid" alt="Office of Technology Services Logo">
</div>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NavigationIcons" data-bs-toggle="collapse" data-bs-target="#NavigationIcons" aria-controls="NavigationIcons" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon fas fa-bars me-1" aria-hidden="true"></span>Menu
</button>
<div class="collapse navbar-collapse" id="NavigationIcons">
<ul class="navbar-nav navbar-icon-links">
<li class="nav-item">
<a class="nav-link" href="#"><span class="icon fas fa-fw fa-cog me-1" aria-hidden="true"></span><span class="">Text Link</span></a>
<div class="icon-link-border-bottom"></div>
</li>
<li class="nav-item">
<a class="nav-link active" href="#"><span class="icon fas fa-fw fa-cog me-1" aria-hidden="true"></span><span class="">Text Link</span></a>
<div class="icon-link-border-bottom"></div>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="icon fas fa-fw fa-cog me-1" aria-hidden="true"></span><span class="">Text Link</span></a>
<div class="icon-link-border-bottom"></div>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="icon fas fa-fw fa-cog me-1" aria-hidden="true"></span><span class="">Text Link</span></a>
<div class="icon-link-border-bottom"></div>
</li>
</ul>
</div>
</div>
</nav>