To List or Not to List — That is your <nav>

Last night, I discovered something that will change my life by at least 3 lines of code. Lists are not required to build a menu. Nine words blew my mind!

Why is this so important? It seems insignificant since its only 3 lines of code. It is not insignificant, because as a ‘wise-man’ once told me:

“The best code, is no code.”

Anytime we are able to reduce the amount of code we write, we need to jump at the chance. This does not mean to be less thorough or build lower quality code, this actually mean the opposite. Efficiency, functionality, and quality need to be the main functions of your code and if you can reduce the lines of code, you also reduce the potential for errors and conflicts.

What about screen readers? This should not be an issue, if done correctly. If you wrap your nav with role= “navigation”.

What lines do you save?

That question depends on your styles, but here are just a few of the common lines of code that you will no longer have to write.

<ul> </ul>


line-style-type: none;
display: inline;

I know this seems small now, but imagine what time we will save as we continue to discover efficient ways to reduce code by 3 lines in other places and other ways. Small steps can lead to great things.

There will be and are a lot of people that will never stop using lists for navigation, and that is okay. There are many paths to reach your destination and it is up to you to find the path that works best for you.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.