Navigation Bar

The navigation bar provides users with easy access to different sections and pages.

Example


Code


  <nav class="navbar custom-navbar p-4">
    <div class="navbar-brand">
      <img src="../images/color-logo-2.png" alt="Logo" height="40">
    </div>
    <ul class="nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Work</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Resume</a>
      </li>
    </ul>
  </nav>

Usage

The navbar is present on all tablets and desktops, while a hamburger menu is used on mobile devices.

Accessibility Considerations

The navbar meets WCAG Color Contrast guidelines with dark text against a light background. When in dark mode, the text color changes to ensure sufficient contrast. The navbar also offers consistency on each page.