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.

Navigation Breakdown

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.

Tertiary Navigation: OK, I’m aware that I’m on dodgy ground here, but bear with me. This contains links to the more legal focussed areas; ‘Privacy Policy’ and ‘Terms and Conditions’.

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 <nav> element

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

which must only be used once on a page).

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 <nav>.

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.

2 thoughts on “The Multiple <nav> Conundrum

  1. I’d use nav role=”navigation” for marking up my primary nav. ARIA Landmark roles are great for this, there can be only one per page. You have specificity (you can target the role with css) and semantics, win=win.

    The way I see it, if it would normally appear in your sitemap then you should use nav, if not use something else. Take pagination for example (arguably a form of navigation), I’d use ul class=”page-nav” instead. I want the nav styles, but not the semantics.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>