Navs and Navbar
Notes on Implementation
We implement Bootstrap’s Navs and Navbar components, with some tweaks to the visual appearance of the text to increase color contrast and include an underline. The documentation for Bootstrap Navs and Bootstrap Navbar is applicable.
Accessibility Notes
Add a role=”navigation” to the parent container of the <ul>, or wrap a <nav> element around the whole navigation.
If more than one navigation menu is on a page, a label is necessary to distinguish between them. Use an aria-label or aria-labelledby attribute to provide the label on the <nav> element.
Use the aria-current=”page” attribute on the current/active element to indicate the current page in the menu.
Links must look like links. Color alone must not be used for distinguishing links (this is why an underline is often recommended). Navs and navbars should be styled consistently in terms of their behavior, appearance, and location on pages across a site. If this is done well, the underline on link elements is not necessary and can be removed. A navbar example without the link underlines is given below.
Nav Examples
Left-Aligned Nav
View Code for a left-aligned nav
<nav aria-label= "Left-Aligned" >
<ul class= "nav" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" aria-current= "page" > Active</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" tabindex= "-1" aria-disabled= "true" > Disabled</a>
</li>
</ul>
</nav>
Centered Nav
View Code for a centered nav
<nav aria-label= "Centered" >
<ul class= "nav justify-content-center" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" aria-current= "page" > Active</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" tabindex= "-1" aria-disabled= "true" > Disabled</a>
</li>
</ul>
</nav>
Right-Aligned Nav
View Code for a right-aligned nav
<nav aria-label= "Right-Aligned" >
<ul class= "nav justify-content-end" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" aria-current= "page" > Active</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" tabindex= "-1" aria-disabled= "true" > Disabled</a>
</li>
</ul>
</nav>
Vertical Nav
View Code for a vertical nav
<nav aria-label= "Vertical" >
<ul class= "nav flex-column" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" aria-current= "page" > Active</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" tabindex= "-1" aria-disabled= "true" > Disabled</a>
</li>
</ul>
</nav>
Tabs
View Code for the nav-tabs class
<ul class= "nav nav-tabs" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" > Active</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" tabindex= "-1" aria-disabled= "true" > Disabled</a>
</li>
</ul>
Pills
View Code for the nav-pills class
<ul class= "nav nav-pills" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" > Active</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" tabindex= "-1" aria-disabled= "true" > Disabled</a>
</li>
</ul>
Fill
(Elements are not equal-width and nav fills entire width.)
View Code for the nav-fill class
<ul class= "nav nav-pills nav-fill" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" > Active</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Much longer nav link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" tabindex= "-1" aria-disabled= "true" > Disabled</a>
</li>
</ul>
Justify
(Elements are equal width and nav fills entire width.)
View Code for the nav-justified class
<ul class= "nav nav-pills nav-justified" >
<li class= "nav-item" >
<a class= "nav-link active" href= "#" > Active</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Much longer nav link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" > Disabled</a>
</li>
</ul>
Navbar Example
View Code for a navbar
<nav class= "navbar navbar-expand-lg navbar-light bg-light" aria-label= "Main" >
<a class= "navbar-brand" href= "#" > Navbar</a>
<button class= "navbar-toggler" type= "button" data-toggle= "collapse" data-target= "#navbarSupportedContent" aria-controls= "navbarSupportedContent" aria-expanded= "false" aria-label= "Toggle navigation" >
<span class= "navbar-toggler-icon" ></span>
</button>
<div class= "collapse navbar-collapse" id= "navbarSupportedContent" >
<ul class= "navbar-nav mr-auto" >
<li class= "nav-item active" >
<a class= "nav-link" href= "#" > Home <span class= "sr-only" > (current)</span></a>
</li>
<li class= "nav-item" >
<a class= "nav-link" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled" href= "#" > Disabled</a>
</li>
</ul>
</div>
</nav>
Navbar Example without underlines
View Code for a navbar without underlines
<nav class= "navbar navbar-expand-lg navbar-light bg-light" aria-label= "Main" >
<a class= "navbar-brand text-decoration-none" href= "#" > Navbar</a>
<button class= "navbar-toggler" type= "button" data-toggle= "collapse" data-target= "#navbarSupportedContent" aria-controls= "navbarSupportedContent" aria-expanded= "false" aria-label= "Toggle navigation" >
<span class= "navbar-toggler-icon" ></span>
</button>
<div class= "collapse navbar-collapse" id= "navbarSupportedContent" >
<ul class= "navbar-nav mr-auto" >
<li class= "nav-item active" >
<a class= "nav-link text-decoration-none" href= "#" > Home <span class= "sr-only" > (current)</span></a>
</li>
<li class= "nav-item" >
<a class= "nav-link text-decoration-none" href= "#" > Link</a>
</li>
<li class= "nav-item" >
<a class= "nav-link disabled text-decoration-none" href= "#" > Disabled</a>
</li>
</ul>
</div>
</nav>