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-expand-lg navbar-dark nav-bar-color google-font-text sticky-top">
                <div class="container-fluid">
                <a class="navbar-brand" href="#"><img src="../img/Logo/Logo White.svg" alt="" width="100%"></a>
                  <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>
                  <div class="collapse navbar-collapse p-3" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                      <li class="nav-item">
                        <a class="nav-link nav-highlight" aria-current="page" href="">Projects</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="">Articles</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="">About me</a>
                      </li>
                  </div>
                </div>
              </nav>