Nav Bars

This design system utilizes a responsive navigation bar. For tablet and mobile views, the nav bar items are replaced with a hamburger menu.

The following nav bar is responsive:

Accessibility

All navigation information should be contained in nav element.

The navbar is always black with white text. Hover text is marigold.

Any linked text or images should have alt information showing where the link will lead.

HTML



  <nav class="navbar nav-bar-color navbar-expand-lg bg-body-tertiary mb-5">
    <div class="container-fluid py-0.5"
      <img src="images/image.png" height="30" class="mx-2 mx-2m-1" alt="Back to Home">
      <a class="navbar-brand hiddenMobile" href="#" alt="Back to Home"
        <span class="nav-amanda ms-2"
          Amanda
        </span>
        <span class="nav-gaudette heading2"
          Gaudette
        </span>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"
        <span> class="navbar-toggler-icon"
        </span>
      </button>
      <div class="collapse navbar-collapse ms-auto" id="navbarNav"
        <ul class="navbar-nav ms-auto"
          <li class="nav-item mx-2 ms-auto"
            < a class="nav-link active" aria-current="page" href="#projectLink" Work </a>
          </li>
          <li class="nav-item mx-2 ms-auto"
            <a class="nav-link" href="#" About </a>
          </li>
        </ul>
      </div>
    </div>
  </nav>