The Multiple <nav> Conundrum
I have an issue. I'm currently working on a site, which, in the header, has 3 separate sets of navigation.
"Three!" I hear you cry? Yes, three, but the way they are grouped makes perfect semantic sense. I'll break them down so you can understand where I'm coming from.
Primary Navigation: These are the links to the main content of the site. This navigation allows the user to complete the vast majority of task which the user would visit the site to accomplish, and directs them to fulfil the business objectives of the site.
Secondary Navigation: These links are more focused around the corporate areas of the site. Things like 'About Us', 'Job Vacancies' and the like. These are typically less travelled areas of the site, and to allow the primary navigation the 'space' it requires, these items have been moved to a secondary navigation.
As I write this I'm already convincing myself that these should be tucked away in the footer, so this article may change as we go! But that's what we're all here for, to learn and educate, to share knowledge, but this time you get to see my opinion form on the subject as I go. Neat, huh?!
The intended use of the
From memory, I was aware that the
<nav> element can be used more than once on a page, but just to be sure, I checked on the W3C website, which states:
"Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks. In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary."
Now I'm convinced that (what was) my tertiary navigation can now just be in the footer as a list of links, rather than prominently displayed in the header of the site.
And then there were two
Now I've demoted the tertiary set of navigation to the footer, I'm left with the main site navigation – those areas that we expect the vast majority of our users to be on the site for – and the secondary, corporate set of links.
This is where I'm torn. This is where it comes down to semantics. This is now about my interpretation of how these links should be marked up.
They're both navigation items. But one is simply far more important than the other. Does this mean I can mark them both up with the
<nav> tag? Or should I be more stringent and only mark up the most obvious and important of these sets of navigation links?
A work in progress
This is both the beauty and the curse of the HTML5 spec, as it stands, whilst it's currently still a work in progress.
It's completely open to interpretation (bar some of the more strictly governed elements, such as
We can have multiple tags across the page like
<header>. I can have one inside the , one in each of the
<section>s, another in the
<aside>s, another in the
<article>. But these make semantic sense. They are headers for the elements within which they reside.
Back to the situation at hand
Let's think about this logically.
Back when I had no
<nav> tag available to me, I would only have one div with a class of 'nav'. So why change that line of thought?
The HTML5 spec, as it stands and in my current perception, has only confused the issue. So let's remove the confusion from the situation.
I have one main set of navigation links.
This is what belongs in my
So there we have it. I've boiled it down from three possible set of navigation, to on single main set of navigation. The others are just links that allow you to access less trafficked, but still relevant areas of the site.
How would you have approached this?
I'm extremely interested in how others may have approached this issue, and how some of you out there may have already conquered this or similar problems.
Either way, let's have a discussion in the comments and see what comes out in the wash.