Navigation Bars

The navigation bar must be included on all pages created using this design system. The navigation bar includes a navigation menu and allows users to navigate to different pages of the website.

Accessibility Considerations

Be sure to use the colors specified in the color palette section to ensure accessible contrast ratio. Icons should include descriptive alt attributes that tell users where the link will direct them to.

Usage

• A navigation bar must be included in all pages created within this design system.

Code Example

<nav class="navbar navbar-dark navbar-expand-md">
  <div class="container">
    <button class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand d-none d-lg-flex"
        href="#">
      <img src="../img/Wordmark_Final.svg"
            alt=""
            width="116"
            height="116" />
    </a>
    <a class="navbar-brand d-lg-none"
        href="#">
      <img src="../img/Logomark_Final.svg"
            alt=""
            width="116"
            height="116" />
    </a>
    <div class="collapse navbar-collapse"
          id="navbarSupportedContent">
      <ul class="navbar-nav navbar-nav flex-row ms-auto">
        <li class="nav-item me-5">
          <a class="nav-link active"
              href="#">Work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link"
              href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>