Example

Code

            
      <nav class="navbar navbar-expand-lg nav-bar-color sticky-top" "style="background-color: #2f5c84">
        <div class="container-fluid">
          <a class="navbar-brand" href="index.html"><img src="../images/ColorLogo.jpg" width="60" height="60" alt="primary logo"></a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown"
            aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav ms-auto">
              <li class="nav-item">
                <a class="nav-link active nav-highlight nav-text-color " aria-current="page" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link nav-text-color" href="projects.html">Projects</a>
              </li>
              <li class="nav-item">
                <a class="nav-link nav-text-color" href="about.html">About</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
            
          

Usage

• The navigation bar must be included on all pages.
• The navigation items should remain constant across all pages.
• The navigation bar must stay at the top of the viewport.
• The navigation logo must be linked to the homepage.

Accessibility Considerations

This primary horizontal navigation bar uses dark text against light backgrounds to meet the WCAG color contrast requirement. If using any of the darker backgrounds (surface-brand-primary, surface-brand-secondary, surface-secondary), use one of the lighter text colors (text-brand-primary-light, text-brand-secondary-light, text-inverse).