Skip to Main Content

Pelican Design System icon Pelican Design System Navbar

Navbar

Navbars allow users to move around digital products.

Edit on GitHub

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 mr-1 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="sr-only">(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>
  • Displays an agency logo with a set of textual links underneath
  • Features a search field positioned to the right of the bar
<nav class="navbar navbar-search">
  <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="#navigationItemsList" data-bs-toggle="collapse" data-bs-target="#navigationItemsList" aria-controls="navigationItems" aria-expanded="false" aria-label="Toggle navigation">
      <span class="icon fas fa-bars mr-1 me-1" aria-hidden="true"></span>Menu
    </button>
    <div class="search-form search-form-nav">
      <div class="input-group">
        <label for="search-for" class="sr-only visually-hidden">Search for</label>
        <input type="search" class="form-control" aria-label="Search" id="search-for">
        <button class="btn btn-outline-white" type="button" id="searchButton">
          <span class="icon fas fa-search" aria-hidden="true"></span>
          <span class="visually-hidden">Search</span>
        </button>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="collapse navbar-collapse" id="navigationItemsList">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Text Link <span class="sr-only">(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>
  • 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 mr-1 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 mr-1 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 mr-1 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 mr-1 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 mr-1 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

Previous
Next
Page top