A Horizontal Navbar classless redux

by Andy Prevost

Saturday December 6 2025

There is no way of creating a new CSS framework, classless or class-light, without a thorough knowledge of HTML5. 

One aspect of HTML5 is the new structure the specification brings with it. Some, with controversy (or at least confusion).

The new layout semantic tags:

<header>
<nav>
<main>
<footer>

go a long way towards creating a solid structure. Where there is some confusion is around the <nav> tag. I personally think it belongs inside the <header> tag for a horizontal navbar, and inside the <main> tag for a vertical navbar. Of course, it could also go inside the <footer> tag for a bottom horizontal navbar.

The answer is that any of these work. You just have to account for it in your CSS.

I had originally written Worx CSS classless with the nav having a role="horizontal_navbar" as part of the semantic <nav tag. I've re-written my classless CSS and based the horizontal navbar two different ways, first as a tag inside <header> and second as a tag following <header>. And both work perfectly. I was also able to maintain a "brand" section, again completely classless.

My next challenge is to create a horizontal megamenu – classless. Let's see if I can pull that off.

 

 

◀ Previous Next ▶

Post a Comment