Navbar

The navigation bar in this design system includes the brand logo and a menu.

Adjust the browser window size to view the expected responsive behaviour of the navbar.

Usage

The navigation bar must be included on all pages using this design system to allow users to easily access all pages of the website.

Accessibility

Make sure to include aria-current="page" on the active page.

Code Example

        <nav class ="navbar navbar-expand-lg bg-body-tertiary">
            <div class="container-fluid">
                <a class="navbar-brand" href="#"><img src="../images/coloricon2.svg" alt="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 flex-nowrap">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" 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="#" target="_blank">resume</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>