HTML Navigation

A navigation pattern is a group of links. With a little CSS these groups of links can be very nice. Navigation elements primary purpose is to help guide the user to the content their looking for. The better we describe and organize our navigation, the easier it will be to navigate for the user.

Semantically HTML5 has a <nav> tag just for this purpose. Visually it's no different than a div, it's more of a behind the scenes grouping elements that we can describe with additional attributes for assisted technologies. In the example below we've added the role="navigation" attribute to the <nav> element.

Navigation with the Nav element Pluralsight

The Basics

It's more common to group our navigation elements in an un-ordered list to provide even more structure, but it's not necessary to. The difference in structure also gives a difference in default styling. List items are block level elements, and anchors are inline. Below the Anchors are already aligned beside eachother. This isn't great on smaller devices and the navigation collapses not quite right. Depending on the size of the monitor you're looking at this article with, Nav Item 4, or Nav Item 5 maybe breaking to the next line.

Max-width Breakpoint

Up to the point where we have the available space for the navigation, make each navigation item on its own line using display:block

Grouping with Unordered Lists

In the example above we have a basic navigation that's accessible on all devices. Like the span element, anchor tags are also inline elements. The grouping of unordered lists is a slightly different way of thinking because the default styling on each list item will put them on their own line. The default styling of list items have bullet points and spacing on the left caused by padding - we will want to remove these.

Mobile First - Min-width breakpoint

Another advantage to grouping the navigation items in unordered lists is the hierarchy the structure provides when we begin to add drop down sub menus to our navigation items. The benefits to the structure of our CSS is it allows us to maintain a mobile-first approach to our styles.