Navigation Bar
Example
Code
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid"><a class="navbar-brand" href="#">WHAT_SO_ADEM</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active nav-highlight" aria-current="page" href="#">Home</a>
<a class="nav-link" >Research</a>
<a class="nav-link">Type Hierarchies</a>
<!-- <a class="nav-link" href="#">Pricing</a> -->
</div>
</div>
</div>
</nav>
Usage
This navigation bar shall be used in all the pages of the website
The Navigation bar is resposive and must be used appropriately for each screensize
Accessibilty Considerations
Navigation bar with contrast ratio of 9.73:1 passes the WCAG Compliance for Small text, Large text and UI Components. The typeface being difficult to read, must be used sparsely only as an accent and must not be used for running text.