What is an effective design to hide/minimize primary navigation to focus the user on secondary navigation, while still providing access to the primary nav?

(rephrased from below to make it more of a direct question)

I'm working on a site design that is very data-heavy and requires a lot of sub-navigation. One solution that I'm exploring is hiding/minimizing the full site navigation once you are in a secondary area, and instead focusing solely on the sub-navigation within that section. For example, the full site navigation might be hidden behind a "menu" button or something similar that expands. Another possibility is doing something like NBCnews.com, where the page loads "pre-scrolled" down slightly, but if the user scrolls up to the top they can see the main nav again (of course, discoverability is a factor here).

I'm having trouble finding good examples of this online, and don't really know a good name for either design pattern which is impeding my search for examples or any usability findings.

If anyone has examples to share, usability findings, or alternative solutions, that would be greatly appreciated! Thanks.

  • Questions that just ask for references / examples are in danger of getting flagged here. Perhaps turn this into a specific question? Ex: I'm thinking of doing XYZ, am I missing anything? Or, here's all the info about my situation, is there a way to show it like ____? People should be providing references in their answers regardless. Oct 23, 2012 at 17:29
  • How many levels of sub-navigation are we talking, roughly?
    – Matt Obee
    Oct 23, 2012 at 20:36
  • I've tried to make it more direct as a question -- I'm not at a point where I have a specific solution to critique, so hopefully this is appropriate. Oct 23, 2012 at 21:07
  • Matt -- up to 3 levels deep. Basically once you are in the second level, the first level is no longer very relevant to your decision-making, and 3 nav schemes on one page seems like overkill. Oct 23, 2012 at 21:08

2 Answers 2


Interesting idea, but you shouldn’t hide the global, site wide navigation for several reasons. Users who find your site usually don’t hit the start page and start to navigate their way through content. Instead they use a search engine looking for content, which find the specific page the user wants. And this isn’t the start page but rather a page way down the content structure. And to inform your users what else they can expect to find on the site, the global navigation should be visible on every page of your site.

That said it’s perfectly alright to hide second, third, firth,... level of navigation – as long as you give the user a clue how to navigate up in the structure. This could be done either by a breadcrumb or semi-hidden navigation, such as the one implemented on MSDN (with > 10 000 pages):

enter image description here

To the left (with yellow markers), you see 11 levels of navigation, easily accessible and not taking too much space of the content page (to the right). At the top – you see the global navigation (Home | Library | Learn...).

So as a courtesy to you users, keep the global navigation visible at all times – and minimize subsequent levels of navigation. Implement this style and you’re ready for some real test and look at the results you get closely.

  • Thanks Benny, unfortunately I don't think something like this is an option for my particular project. I should have clarified above -- although the site is data-heavy, it is a marketing-oriented site that is strongly driven by visual design (think edge-to-edge images, etc.). My goal with hiding some of the less relevant navigation was to try to get as much nav "out of the way" so the creative team will still feel like they have a big canvas to work with. Nov 9, 2012 at 15:04

I'm not sure I would hide the top-level navigation - that should normally be consistent in its presentation and easily accessible throughout. I would however dedicate the sub-navigation to the current section and make it the most prominent navigational element (more prominent than the top-level menu) so if a user were on a third-level page, I would only show third-level siblings and children of that page and not second-level parents. This is a common pattern on commerce sites with deeply categorised products (Amazon is the obvious example).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.