Navigation Bar
For Large Desktop Screens
This is the navigation bar as it would appear on large format desktop screens.
For Large Desktop Screens with an Item Selected
This is the navigation as it would appear on large format screens with one item selected.
For Small Mobile Screens
This is the navigation as it would appear on small format screens, like tablet and mobile. The menu options collapse into a hamburger menu.
Usage and Best Practices
The navigation bar should be placed at the top of the page. On large format screens, links should be left aligned to ensure that all options appear withing the viewport. Links for active pages should be darkened to #693e3c text color. In smaller formats, the hamburger should be compressed to the right side of the screen, easily accessible by the thumb on mobile.
Accessibility Considerations
The navigation bar is made to be adaptive via bootstrap, to be easily accessed on any screen sizes. Active links are darkened to be easily identified even by those with limited color perception.
Code Example
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="img/logo.png"></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">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Recent Work</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">CV</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>