What are some good examples of left-hand sub-menu navigation?

November 5, 2007 5:22 PM

I have a client who wants to reveal its entire site map in the left navigation. What left-hand navigation examples can I show them as an alternative?

Information architects and web fanatics: I have a large corporate client who is determined to expose its entire site map through its left hand navigation. In doing so they want three tiers -- one main list with two levels of fly-outs. I'm trying to convince them that hiding at least one level of fly-outs would serve them better, so want to show them examples. Here's what I envision:

-Left nav has n number of items
-User clicks on one of these items
-User goes that page and nav expands down to reveal second-tier items that relate to that facet
-Third-tier items are then accessible as fly-outs from those newly revealed second tier items

Can you think of any sites that do this or similar? Even sites with two levels that expand, sans fly-outs, would be useful examples.

posted by kables to computers & internet (9 comments total)

I designed the nav for Stephens College. It's pretty much what you're describing, with the addition of 'breadcrumbs' above the list of items in the current tier to remind you of where you are. I think the site has more than three tiers.
posted by zsazsa at 5:24 PM on November 5, 2007

UBOC kind of does what you're talking about, without any fly-outs (the homepage doesn't have a left nav bar, but all the other pages do). For example. Of course, they might not be the greatest example because their print gets very tiny at some of the lower levels of the hierarchy.
posted by phoenixy at 6:37 PM on November 5, 2007

I'm building something similar right now without the third tier fly-outs.

Click on "Gala Details" or "Student Event" for an example of the second tier.
posted by brad! at 7:02 PM on November 5, 2007 [1 favorite]

Offer to do it their way, but at twice the price.

If they agree, you owe me one (1) beer.
posted by b1tr0t at 8:46 PM on November 5, 2007

I really like how Adobe implemented their flyouts/dropdown navigation. When you hover over "Solutions" and "Communities", you see there are bold headers that divide each menu into sections. This is an elegant way to achieve a 3-tier flyout menu in a 2-tier format. Though if you have a huge number of tier-2 and tier-3 items, it will quickly get ugly. (In that case, you should really be simplifying and consolidating the menu. Nav =/= site map).

The problem with the nav you proposed is that once a user lands on a tier-3 page, they'd need to start at the beginning to access a tier-2 item in a different menu section. I recommend the following workflow instead:
1. Left nav has n number of items with tier-2 flyouts
2. User can click on tier-1 menu or tier-2 flyout menu
3. Tier-3 items are links/sections in the tier-2 page

This has the advantage of exposing the entire tier-1 and tier-2 menu system even when the user is on a tier-3 page.

As an alternative, I rather like how U Florida set up their navigation. The tier-2 pages are very practical and elegant in terms of how lean yet usable it is and still doesn't take very much space. No fancy flyout menus yet I can browse through pages 3-4 levels deep very quickly and find what I need.
posted by junesix at 9:28 PM on November 5, 2007

Entrepreneur.com does what you're talking about but no third-tier fly-outs. You have to click to those second levels to see third-level nav (within the body of the page) or do a "view all" on that second-level category.
posted by faunafrailty at 10:10 PM on November 5, 2007

In my view, based on unscientific observation of people using sites, you generally shouldn't use flyouts or dropdowns unless most visitors will know what they want and need a direct path to get it. Sites which are primarily about promoting a product/service and helping inexperienced users delve into information need to avoid forcing premature, uninformed decisions.

As for multiple levels of flyout, well for any type of site that tends to end up like one of these, even for people with good motor skills, so your proposed solution seems like a good one. I think you might have more success taking a negative approach where you show them some horribly fiddly multi-level flyout/dropdown menus.
posted by malevolent at 12:37 AM on November 6, 2007

Fly-outs done well here:

BMW USA
posted by Slenny at 3:04 AM on November 6, 2007

Thanks all. Some helpful things here.
posted by kables at 11:00 AM on November 6, 2007