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.

Left-Aligned Nav


Centered Nav


Right-Aligned Nav


Vertical Nav


Tabs


Pills


Fill

(Elements are not equal-width and nav fills entire width.)


Justify

(Elements are equal width and nav fills entire width.)