Swanson DS: Navigation

- Typography
- Color
- Logo
- Homepage
- About Me

Both the navigation and footer should be used on all pages of the website using this design system. This nav bar should be responsive to screen size and become a hamburger menu on smaller screen sizes. The footer is consistent across all designs, but has both a dark-moed and light-mode version.

Responsive Navigation Variations

Footer Variations

Accessibility Considerations

Navbar theme should be chosen appropriately to ensure color contrast is within the defined limits. Using the design system's colors will achieve this. Any icons should have an alt tag.

Usage

Used to navigate the website. All pages should have this.

Code Examples

Navigation Bar

<nav class="navbar navbar-light bg-light navbar-expand-lg">
    <div class="container">
        <button class="navbar-toggler navbar-toggler-light" type="button" data-bs-toggle="collapse" data-bs-target="#collapsingNavbar3">
            <span class="navbar-toggler-icon navbar-toggler-icon-light"></span>
        </button>
        <a href="#" class="navbar-brand d-flex w-50 me-auto d-lg-block d-none">
            <img class="d-lg-block d-none" src="../../img/Logo/SwansonLogo_Full_v1.png" style="width: 250px;" alt="An origami swan with the name, Patrick Swanson next to it">
        </a>
        <a href="#" class="navbar-brand d-flex w-50 me-auto d-lg-none d-md-block mx-auto text-center">
            <img class="" src="../../img/Logo/SwansonLogo_Swan250_v2.png" style="width: 75px;" alt="An origami swan">
        </a>
        <div class="navbar-collapse collapse w-100" id="collapsingNavbar3">
            <ul class="nav navbar-nav ms-auto w-100 justify-content-end">
                <li class="nav-item">
                    <a class="nav-link" href="#" id="nav-link-light">About Me</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" id="nav-link-light">Projects</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" id="nav-link-light">Resume</a>
                </li>
                <li class="nav-item">
                    <div class="social-icons">
                        <a class="social-icon" href="#" target="_blank"><i class="fab fa-linkedin-in" alt="LinkedIn Logo"></i></a>
                    </div>
                </li>
                <li class="nav-item">
                    <div class="social-icons">
                        <a class="social-icon" href="#" target="_blank"><i class="fa-solid fa-envelope" alt="Email Icon"></i></a>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</nav>

Footer

<div class="footer-dark">
    &copy; Patrick Swanson <br>Last Updated: MM/DD/YYYY
</div>