Horizontal Navigation; nine ways to skin a cat

Nice round-up. I particularly like it when the designer has made the extra effort to create three versions of each link: the normal, selected, and hover/focus styles should all be distinctly styled.

Martin — agreed. You can make it look good and have great usability.

I like nclud’s work a lot, by the way. I’m currently not taking on new projects so I’ve been referring people to your site and a couple others.

Brain, much appreciated! We’ve got a little internal referral program for those closest to us — We haven’t yet determined how to handle it externally, but sure to have them pass along your name. If anything comes of it, I know we would like to send something to show our appreciation.

We just sent a design off to a client with a horizontal tabbed main nav across the top and secondary navigation along the left-hand side. Pretty common I’d say.

Well, in addition to sending us back a Frankensteined version of our design (done in MS Word, lovely) they wanted us to swap the nav, with primary down the side and secondary across the top. Ludicrous!

HA HA. I recently had a client (for a Basecamp like app) tell me that our top head treatment (including navigation) was too large in height — they were concerned about content and “the fold”. Specifically they requested we make it more like Basecamp.

So, what did I do? I took a screen shot of Basecamp and the mock of the proposed designed and what did we have — our design was about 85px less in height than that of Basecamp. So being like Basecamp would have the negative effect.

I kindly explained to them the reason we are good as what we do is because we can make it look like there is a lot of space without actually using a lot of space — no real complaints since.

As much as I like horizontal navigation, sometimes I get requests from clients to add a new section to the site. Most of the time, I can explain to them that what they really need is a sub-section to an already existing section but often it really s needed or they have their minds made up and in those cases, a vertical navigation is so much easier to add to.

I am with you there Sean — my only real issue with the horizontal navigation is its limited horizontal space. We are all about forward-thinking design here so we try and always explain to clients the potential future ramifications of using a horizontal nav. But of course with CSS, a horizontal nav can become a vertical one in minutes.

I will say the debate over sub-nav vs. primary nav is best articulated through an IA sitemap. Most of the times they are seemingly overwhelming and complicated that they provide the best forum for discussion on how to best organize the site properly.

“ Brian Morykon said: We don’t always have to innovate once we’ve found a method that works really well…... Finally, they don’t have to figure out a new paradigm for every site they visit.”

That is gold right there!

When something is common (even if not optimal) use can become automatic, freeing users to enjoy other things instead of focusing on navigation. Navigation HAS to be secondary to content, and must not intrude upon same.

What is funny also is how site componnents can have the same NAME. Even on a Swedish site, the forum is called, strangely enough “FORUM” you know exactly where to go, and what you’ll find when you get there!

“Accessibility” is a HELL OF A LOT MORE than gymnastic markup designed to make your site readable by a brain-dead machine!

I make of my Site Horizontal Naviagtion from CSS. Thanks

Lets hope we are all making our navigation from CSS.

Brian, I was hoping someone would bring up Jason Santa Maria’s nav on Happy Cog — I didn’t include it because it isn’t a style that is utilized often; but it is very creative and useful (especially since it is in context).

I agree with not having to innovate — however, we at nclud pride ourselves on producing unique, stylish and usable designs for the web. Everything we do doesn’t have to be new, innovative and breath-taking — but it is sure fun as creative designers to try!

There is another style of horizontal nav which can work well on sites with only a few links: the sentence. It is most famously used on Zeldman’s Happy Cog Studios site (he talks about why he uses it on his blog). I also use it on my site.

Here’s something worth mentioning. We don’t always have to innovate once we’ve found a method that works really well. Top horizontal main navigation with sidebar (or under top, like Apple’s site) secondary nav is becoming standard and users everywhere are rejoicing. Finally, they don’t have to figure out a new paradigm for every site they visit. There’s more freedom in designing a web application’s interface because the user will likely be using it on a regular basis and is willing to invest more time in learning how it works. But for most web sites the navigation needs to make sense immediately, which makes top horizontal main nav (however you want to skin it) the way to go.

Steve,

I am with you. However, I personally am not a fan of iconic navigation (in my opinion too many icons end up defeating the purpose of icons — they clutter as opposed to distinguish).

I am however a big fan of using icons to identify content and context. In a redesign of a web app we are working on for BT; we’ve been using icons to visually convey the primary section — placed in the top right corner so as to literally be able to identify your location out of the corner of your eye.

And Dandyna — totally with you. Simple and usable horizontal navigation will always be my favorite, when appropriate.

Matthew — I completely agree! A lot of times when you are working with a designer and developer separately a lot of those very subtle and very important details get lost in translation.

hmmm…. pah no design ideas or technical proposals, just another bloody gallery of other people’s sites..

I was expecting (hoping) a discussion of why horizontal navigation is good/better and how to tie that into the other key aspects of communicating with your site visitor…

Hey this site has “X”!

Hey, THIS site has “Y”!

whoop dee f*king do… :(

Steve, my bad!

The post is focused on design, limitations and availability for creativity and uniqueness within this cluttered space.

Lets start the discussion you want! Share with us, what are your thoughts on horizontal vs. vertical?

I personally believe it depends on the content and organization of that content. If you can organize your site into nice and elegant segments not exceeding eight to ten — a horizontal navigation is a very useful choice. However, the horizontal navigation has obvious limitations in space, while the vertical navigation is known for its ability to grow in length — the obvious choice for most robust online publications.

Horizontal navs are stylishly elegant because they can be tucked away at the top of the site near the branding. Maximizing horizontal and vertical space seems to be a very important topic these days — the vertical nav takes up much more real estate that than the horizontal does; ultimately.

“the vertical nav takes up much more real estate that than the horizontal does”

Really? I think you’ll find that they take up the same amount of space, all things being equal. The difference, as far as real estate goes, seems to be that a horizontal treatment at the top of the page takes up more of a layout’s valuable real estate – “above the fold”.

That isn’t necessarily true. The reason I say this is because in MOST cases the vertical treatment spans the total length of the page while the horizontal treatment is always limited to the width of the page.

So, lets do the math quickly. Say you have a horizontal nav that is 770px wide and 40px tall, that is a total area of 30,800.

If you have a vertical nav that is 120px wide and say runs about 1200px long, that is a total area of 144,000.

So, the vertical nav in that situation (which I would say is fairly common — think blog layout) takes up 20% more real estate than the horizontal

Hello. I would like to add a little something to this discussion.

I really don’t think you guys need to care so much about the space of the navigation since it’s an important element in a website design, as well as the all other elements. Sometimes a good navigation needs the “space” you guys are talking about for it to work as it should be: to show the user where he is, where to go next, etc. So if a good naviagtion needs it’s space, give it to it, doesn’t really matter if it’s horizontal or vertical.

Anyway, nice collection of navigation designs and amazing site design, although it is very simple ;)

Dor, terrific point — thank you for joining in on the discussion.

I agree with you that we sometimes diminish the importance of the navigation to ensure we are getting as much content “above-the-fold” as possible.

Martin, I think you ARE right about the vertical navigation taking more space (and not just because it can expand up/down infinitely but because we read left to right.  giving it some thought, I feel that a horizontal menu should be broken up into 3 or so bands so the eye doesnt have to scan so long (kinda like newspaper columns)

I think the ROLE of the navigational elements should be discussed as well, TOP LEVEL, GLOBAL elements should be across the top, like the breadcrumbs, etc

SECTION or TAB specific navigation should be up/down -adjacent to the content they reference, and should be iconic (and the icons would be easier to recognize since they would be more closely geared toward the section/content?

I’ll implement that in my next project..:)

plain text, big, line-height, different-colours on statuses horizontal navigation is my favorite.

I’m very much a fan of horizontal navigation and i thing the best site that displays good use of this is digg.com