Navbar

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>

Resources

• Bootstrap Documentation - Navbar
• Bootstrap Documentation - Navs