It's important to start with a basic design. One which others can build upon

Nav

Start with a navigation that sets the basis for the rest. This is a basic html structure for a navigation. Use a nav element, but give it a class we can control. Use an unordered list with a series of list item children. Inside each list item, put an anchor. This structure might seem like it can be improved, but indeed, this structure is perfect for not only semantic html, but also for css control.

Nav-default

What are the things worth learning here? Well the most important thing is that we understand the difference between the li element and an a element. List Items are a block element, and Anchors are an inline element. Block elements fill their parent widths, but inline elements only have a width of their content. If we put an anchor into a list item, the anchor can only be clicked where its text is. But if we change the display of the anchor in our .nav element to block, then it will fill up whatever space it is given.

Of course, this pattern is best placed inside of a smaller area. Someplace vertical, like a sidebar. Add in some text alignment classes and we've got plenty of variety for use.

Active

Let's add in the concept of an .active element.

This is a nice generic class to use within any list structure where something can be chose. When added to one of the sibling li elements, we can use it to display which of the links is currently chosen. You may or may not have noticed the hovering effect on our links before, but now, when clicking between them, we simulate a page change, or section transition.

Flex navigation will bring us from the vertical to the horizontal. Getting our nav to be horizontal can be as easy as implementing some flex classes. Understanding how to create and utilize these can be the difference between complicated thoughts about layout and the simple differences between horizontal and vertical.

Flex-box

Flex-box is not something super hard to understand how to use, but it can be complicated to implement in more interesting ways. At its most simple, it works on a parent and its immediate children. Set the parent to display:flex and the children will line up in a horizontal row.

This works just fine, and we'll definitely use these later. But for simplicity's sake, let's make our first navigation sub component.

Nav-flex

When creating sub components, we still use the core component class. After all, this simply changes a small aspect of the design. We implement the same concepts as the .flex-parent and .flex-child classes into one class .nav-flex, which greatly simplifies having to add .flex-child to all those possible list items. In fact, we'll add our new class to the same selectors for .nav-default.

Nav-pills

Let's make a new sub component. We'll add this selector into a new selector for inline-flex. But we won't add the list items. This will mean our pills will be horizontal, but they won't stretch to fill the space. This gives us links of just the size of the text. Adding a border-radius to them will make them look like little pills lined up in a row, and updating the padding and margin will space them out and plump them up.

Nav-inline

An inline flex element gives us some new interesting possibilities if we combine it with some of our other classes.

By adding white-space:nowrap to our inline elements, we'll make sure that their text keeps in a straight line. By adding overflow:auto we ensure that our content can all be reached, even if it's in a space or a screen that's too small for it.

If we want, we can add .flex-wrap to our flexing parent, and it will give us children that wrap around within the available space.

Time to try some things that break from our core design. Luckily they can still make use of plenty of previous concepts.

Nav-crumbs

This style of navigation is often called a breadcrumb navigation. It's most often used to represent a backward trail of linear navigation. Whenever a user moves forward, this nav shows the way back. Add the .nav-crumbs ul into the inline selector to make it flex. Often times the last element is the current page, and therefore would not be a link. Let's add a .nav span selector into our core anchor selector. This will allow us to add an element into any of our designs that doesn't represent a link.

Nav-tabs

So... to be perfectly honest, this one is goofy. It does some goofy over-rides and it has some goofy quirks. In order to get the gap in the bottom of the active element, technically we're just drawing over it with a white line. In this case we're using an ::after pseudo element and making it look like a white rectangle. Just position it absolutely and cover up the parent's bottom border. It works, but it's kind of gross.

Nav-material

Android's Material design gave us a very interesting type of tabbed design. It doesn't look like physical manilla tabs, but it does give us some more interesting transitions than we've attempted so far. It uses the same ::after technique, but keeps everything else a lot simpler.

Header Navigation

Would you look at that, we didn't have to do many new things at all in our actual nav. Of course, I think it requires an understanding of what is a nav, and what is not a nav. Technically only our list of links is a nav, and so the whole header is not a nav, only a small portion. With a little design on our header, we get something that feels pretty common these days. That last selector is getting to be a bit long. Normally we want to avoid selectors like that, as they're difficult to over-ride later. For right now, we'll leave it be and just realize that this IS us over-riding things at this point, and it's gotten that complex.

We can make varieties of our new header arrangement all day long.

Responsiveness

But none of those are responsive, and they're getting a bit unwieldy. If you're on mobile and reading this, things have already gotten a bit gross. So let's inject a bit of responsiveness into our design.

Let's add a class called responsive to our tools. This when used in conjunction with a nav or a flex parent, will turn off the display:flex of that element on smaller screens. It turns out this is all we need to do to turn out flexiness off. The list items will simply ignore their flex properties, since they are not inside a parent set to flex.

It's possible we could do this with one class on the header, but that wouldn't give us quite enough flexibility in the future.

Hamburger Menu

Let's take it all the way. Let's use a label and a checkbox. Hide the label normally, and show it when the screen is small enough. Show the nav normally, hide it when the screen is small. When the label is clicked, it will activate the hidden checkbox. When the hidden checkbox is checked, it will activate the nav next to it. This is the checkbox trick. No javascript required.

So what have we learned, in fact? I don't know that we learned anything. We saw a bunch of examples. We got a good start on some common design patterns. The more complex we get, the less of a tutorial it is, and more of something custom for each design's need. Here are a number of helpful, hopefully simple, examples that can be taken and ran with to create bigger and better things.