Last Updated: June 11, 2021
· csswizardry

Simple nav abstraction

When creating any sites I can be pretty sure that I will need several components that consist of a series of horizontal links contained in either a ul or an ol.

Rather than repeatedly building these components over and over I decided to create what I call ‘the nav abstraction’ to abstract out the repeated design pattern into a reusable, extendable class:

    .nav > li,
        .nav > li > a{

As easy as that.

Now we have a transportable class that we can apply to any lists that we can then extend, for example:

<ul class="nav site-nav">
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact</a></li>

<ol class="nav breadcrumb">
    <li><a href="/about/">About</a></li>
    <li><a href="/about/team/">Team</a></li>
    <li><a href="/about/team/directors/">Directors</a></li>