Preview

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. The following navigation bar example is responsive. Adjust the browser size to view responsive behaviors.

Code

                        
                            <nav class="navbar navbar-expand-lg navbar-dark color-dark-hover">
                            	<a class="navbar-brand" href="#">
                            		<img src="../img/Color.png" width="64" alt="Logo">
                            	</a>
                            	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarNav"
                            		aria-expanded="false" aria-label="Toggle navigation">
                            		<span class="navbar-toggler-icon"></span>
                            	</button>
                            	<div class="collapse navbar-collapse justify-content-end" id="navbar">
                            		<ul class="navbar-nav">
                            			<li class="nav-item active">
                            				<a class="nav-link" href="#" aria-current="page">HOME<span class="sr-only">(current)</span></a>
                            			</li>
                            			<li class="nav-item">
                            				<a class="nav-link" href="#">PORTFOLIO</a>
                            			</li>
                            			<li class="nav-item">
                            				<a class="nav-link" href="#">RESUME</a>
                            			</li>
                            			<li class="nav-item">
                            				<a class="nav-link" href="#">CONTACT</a>
                            			</li>
                            		</ul>
                            	</div>
                            </nav>
                        
                    

Accessibility

Ensure the current page has aria-current="page".