Navigation Bar

The navigation bar must be included on every page created using this design system. The navigation bar includes links that enable users to access all other site pages.

Accessibility

Navigation bar has a light background with dark text to promote accessbility. For dark mode, light text should be used on a dark background.

Code

          <div class="accordion" id="research-accordion">
            <div class="card">
               <div class="card-header" id="headingOne">
                  <h2 class="mb-0">
                      <button class="btn btn-link btn-block text-left" type="
                      button" data-toggle="collapse" data-target="#collapseOne"
                      aria-expanded="true" aria-controls="collapseOne">
                          Project Summary and Motivation
                      </button>
                    </h2>
                </div>
                <div id="collapseOne" class="collapse show"
                aria-labelledby="headingOne"data-parent="#research-accordian">
                    <div class="card-body">
                        Page Content
                    </div>
                </div>
            </div>
            <div class="card">
               <div class="card-header" id="headingTwo">
                  <h2 class="mb-0">
                      <button class="btn btn-link btn-block text-left" type="button"
                      data-toggle="collapse" data-target="#collapseTwo"
                      aria-expanded="false" aria-controls="collapseTwo">
                          Related Publications and Posters
                      </button>
                    </h2>
                </div>
                <div id="collapseOne" class="collapse show"
                aria-labelledby="headingOne"data-parent="#research-accordian">
                    <div class="card-body">
                        Page Content
                    </div>
                </div>
            </div>
            <div class="card">
               <div class="card-header" id="headingThree">
                  <h2 class="mb-0">
                      <button class="btn btn-link btn-block text-left" type="button"
                      data-toggle="collapse" data-target="#collapseThree"
                      aria-expanded="false" aria-controls="collapseThree">
                          Funded Research Grants
                      </button>
                    </h2>
                </div>
                <div id="collapseOne" class="collapse show"
                aria-labelledby="headingThree"data-parent="#research-accordian">
                    <div class="card-body">
                        Page Content
                    </div>
                </div>
            </div>
           </div>