Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Navigation For Mega-Sites

For most websites, navigation is not particularly challenging. A primary navigation bar, supported by sub-navigation, is often enough.

Typically, sub-navigation displays the parent, siblings and children of the current page. A persistent primary navigation bar shows top-level pages, allowing users to move between sections.

However, there is one class of website for which this traditional form of navigation falls short. It is what I refer to as a “mega-site”.

What Is A Mega-Site? Link

A mega-site is typically owned by a large organization that encompasses a broad range of services or products. The organization also often supports a diverse user base.

Organizations with mega-sites include institutions such as the BBC91, companies with diverse portfolios such as Microsoft2, government bodies, higher-education institutions and large charities that run many campaigns, such as the World Wildlife Fund3.

These websites:

  • are extremely large,
  • are many levels deep,
  • are made up of many micro-websites and subsections,
  • cater to many audiences,
  • have multiple entry points.

Websites of this size and complexity bring some unique navigational challenges.

The Challenges Of Navigation On Mega-Sites Link

At our company, we do a lot of work on mega-sites, and they can prove to be particularly challenging, especially when trying to use traditional navigation.

Traditional Navigation Cannot Support Depth Link

The deeper the website, the more that traditional navigation struggles. Navigation can comfortably accommodate three levels; beyond that, one of two things happens. Either the navigation expands to the point where more screen real estate is dedicated to navigation than to content (a problem made worse by the sheer number of pages on a mega-site), or higher pages in the information architecture no longer appear in the navigation.

In the latter case, if the user is deep within the website, they will lose the context of where they are because they are not seeing where the current page fits in the website’s structure.

Image showing navigation dominating page real estate4
While traditional navigational approaches, combined with breadcrumbs, can scale to accommodate mega-sites, they do so at the cost of ever-increasing real estate. Larger version5.

The latter problem can be partially mitigated by well-implemented breadcrumbs. However, this is not the only issue with traditional navigation.

Traditional Navigation Cannot Support Multiple Entry Points Link

Traditional navigation can confuse users who enter the website via a micro-site or subsection.

Take a student who is considering attending a university for post-graduate studies. This person is probably more interested in a particular faculty or school than in the institution as a whole. They could, therefore, very well enter the website at that level, rather than at the university’s home page.

Another example would be a single mother wanting to know about child benefits. They are more likely to arrive on the benefits subsite than on the government’s home page. In such situations, the user’s focus is on their current context (i.e. post-graduate studies or child benefits). They are not immediately interested in the broader mega-site.

Unfortunately, traditional primary and secondary navigation exposes the user to this broader context, whether they want it or not.

An example of a site with confusing navigational labels6
Does a section labelled “Research” on a university’s page refer to the entire university or just the school being viewed? What about when the same label appears twice but goes to two separate places? Larger version7.

To make matters worse, the current context can actually alter the user’s perception of the navigation items. For example, would our post-graduate student think that a link labelled “About us” is about the school in question or about the larger institution. In some extreme cases, you can even find the same navigation labels being used for both the current context and the broader institution (for example, information about the university and about the school might both be labelled “About us” on the same page).

How, then, can we solve the navigation problems of mega-sites?

As with all things, there is no perfect solution. However, there are solutions that are a step forward from navigation better suited to small websites. The first of these solutions is the most radical.

Get Rid of Navigation Entirely Link

I first heard of this approach in Russ Weakley’s talk about doing away with traditional navigation8 back in 2006. It rejects the idea of imposing a navigational structure upon users, instead allowing them to find their own path through the website.

This is achieved by making each Web page a standalone document and tagging it with appropriate meta data. Users can then find pages through a combination of search and navigating by tags. Pulling in links to related documents based on the meta data associated with each page would also be possible.

This approach has several advantages:

  • It supports a website of limitless size.
  • It is ideally suited to users who come to the website from a deep link.
  • It allows for a much more dynamic relationship between pages and easily accommodates pages being added and removed.

Of course, it is not without its challenges. While individual sections of the website could still have a landing page (for example,, the business may well struggle with the idea of not having a specific website to manage. More importantly, this approach relies heavily on having well-tagged documents and powerful search functionality, both of which are hard to achieve with a mega-site.

That said, it is an option, and one that shouldn’t be quickly dismissed.

Split the Website Into Smaller Micro-Sites Link

Another approach is to break the mega-site into a number of smaller more manageable micro-sites. This is the approach adopted by the BBC91.

Instead of treating its Web presence as a single entity, the BBC has broken it down into subsites, such as news, sports, TV, radio and so on. Each website has its own navigation and thus avoids the problems associated with mega-sites.

The way the BBC avoids a disjointed experience for users who move between micro-sites is to ensure consistency in top-level navigation and in the user interface.

BBC web presences10
The BBC avoids being a mega-site by splitting its Web presence into a number of smaller websites, while maintaining consistency in navigation and design language. Larger version11.

Although the BBC’s micro-sites do vary in appearance, they make use of the same primary navigation, and also have a consistent design language for things like typography, layout and modules. This language, defined on the BBC’s Global Experience Language12 (GEL) website, is consistent enough to ensure a stable user experience yet flexible enough to cater to different audiences and subject matter.

It is a fine line to walk. Make each micro-site too different and users will become confused by changes in the UI. Make them too similar and users will be thrown off upon finding that the website does not have a single navigational structure.

Use a Breadcrumb-Driven Approach Link

A third solution is the one adopted by Gov.uk13. It does away with dedicated areas for navigation, and instead uses the page’s content to link to its children. It then uses breadcrumbs to help the user identify where they are within the navigational hierarchy and to move back up the tree when needed. website14 relies almost exclusively on breadcrumbs for navigation. Larger version15.

The approach has many advantages. For a start, it minimizes the space dedicated to navigation, while at the same time allowing for much more detailed descriptions of each child. In that sense, it is the simplest, cleanest and easiest to understand of the approaches.

It also translates well to mobile devices, which account for 45% of’s Web traffic16.

The prominent breadcrumbs make clear to the user where they are on the website, while in-page navigation to child pages makes the next step obvious. Most of all, the emphasis on content, rather than navigation, appeals to me the most.

Unfortunately, it does have its downsides.

By relying entirely on breadcrumbs and in-page links to children, the user has little context of their current position. They are unaware of the siblings of the current page and of the overall shape of the website (for example, they are unaware of the top-level sections).

This is not a problem if the user is trying to complete a specific task and the website has catered to that task by bringing all content related to it in a single place. However, when a user is in general research mode or when the content related to the task is spread across multiple pages, this approach can prove frustrating.

The frustration is caused by the breadcrumb navigation requiring the user to navigate up and down the website’s structure. There is no way to enable jumping between sections.

Fortunately, there is a hybrid approach, which uses breadcrumbs as the primary navigational tool, but augmented with more traditional navigation.

My Preferred Solution Link

My preferred solution is inspired by the navigational approach used by BBC Sports before GEL was introduced.

Instead of running them horizontally, the BBC flipped the traditional breadcrumbs vertically. At the end of each breadcrumb list, the current page also showed its children. When you reached the bottom of the tree, the navigation would continue to display the siblings of the current page, instead of its children.

Screenshot of the old BBC sports website17
The old BBC Sports website used vertical breadcrumbs as the primary navigation tool. When the user entered a section, such as football, all other sports (i.e. the siblings) would be removed, focusing the user on the subject at hand. Larger version18.

This approach grouped all navigation together in a single place, gave the user a clear sense of their location and reduced the space dedicated to navigation. Yet, it still suffered from the problems of

When working on the University of Brighton19, we proposed BBC Sports’ approach, but added one important thing. We suggested keeping a consistent top-level navigation bar. While this adds more navigation to the page, it gives the user an instant overview of the structure of the website. This enables users who require information from multiple sections (say, a prospective student researching courses as well as accommodation) to jump quickly between those sections.

In many cases, this is enough to create a simple yet powerful user experience. However, it does not address the need to be able to see the siblings of the current page.

Showing Siblings While Using Breadcrumb Navigation Link

So far, I have considered two possible solutions to this issue.

One works on the assumption that siblings often have a relationship with each other; they are part of the same story, if you will. On that basis, the simple addition of “next” and “previous” buttons (such as you find on many blogs) might be enough of a solution. Users could then move between siblings with the single click of a button.

An alternative approach would be to make each level of the breadcrumb navigation a flyout menu, thereby exposing the siblings of that level. This would enable the user to jump to any sibling on any level of the website and potentially do away with the need for a separate primary navigation bar.

An example of flyout breadcrumb navigation20
By adding flyout menus to the vertical breadcrumb navigation, you give users quick access to any sibling on any level of the website. Larger version21.

This could work whether you use vertical breadcrumb navigation or traditional horizontal breadcrumbs.

That said, I haven’t tested this approach, and some will have concerns about touch devices.

More Ideas Needed Link

As you can see, the issue of navigation on mega-sites is a thorny one, and there does not seem to be a single obvious solution. One of the primary reasons for writing this post is to open a discussion on the subject and hopefully encourage the exploration of some alternative approaches.

As a result, I would really appreciate your thoughts in the comments section and any examples of alternative navigational approaches you have found.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Paul Boag is the author of Digital Adaptation and a leader in digital strategy with over 20 years experience. Through consultancy, speaking, writing, training and mentoring he passionately promotes digital best practice.

  1. 1

    Phil Vallender | Blend Marketing

    March 27, 2013 2:36 pm

    Great article – I find navigation and information architecture of large sites fascinating.

    Of the methods you review, I think that the micro-site approach is the most reliably scalable. Micro-sites can break larger sites down into manageable content areas. Most importantly, they can be simultaneously distinguished from and related to each other by careful use of graphic design.

    I don’t see breadcrumbs working as a large format navigation system on their own, but do think they are very powerful complement to traditional navigation formats.

    I’ll have a think as to what other navigation methods I can conceive for mega-sites!

  2. 2

    Good article … but why no mention of mega menu? Like on msn or Mashable, where the menu expands as a full page width dropdown with clear breakdown of top level menu item ?

  3. 5

    Neal Griffiths

    March 27, 2013 2:41 pm

    Good article. Another, slightly different, approach is to categorise secondary navigation options. E-commerce sites such as John Lewis use this to structure their products without providing a secondary category page to list them (E.g. Electricals/Sound & Vision/Televisions).

  4. 6

    I’ve been very intrigued by’s approach to navigation and organization, and more generally the scope of their project (we’ll never see a project like that in the U.S.). Paul, I think you’ve summed up the very valuable difference in this approach:
    “Most of all, the emphasis on content, rather than navigation, appeals to me the most.”

  5. 7

    Quick note about the mobile usage stat you quote for GOV.UK. The 45% is for just e-petitions not the content part of GOV.UK. The stat for GOV.UK was just above where you pulled your stat from:

    “In the run up to Christmas, GOV.UK saw around 20% of visits from mobile devices. Since Christmas this has jumped to nearly 25%”

  6. 10

    Loren Khulusi

    March 27, 2013 4:34 pm

    I’m not sure about the no navigation approach. While it sounds nice for users who are tech savvy, the vast majority of users will be completely confused.

    Humans are visual creatures and by nature most of us require strong visual cues and direction to figure out how we can interact with whatever software/website is in front of us and I feel that doing away with it will cause an immediate drop in engaged users.

    I manage an e-commerce site that gets about 2-3 million page views a month and even with traditional navigation and breadcrumbs you’d be surprised how many people still get confused with how to navigate. The average person is still very tech illiterate and until that changes we unfortunately have to cater to the lowest common denominator. If we don’t the traffic goes to those who do :-/

    Good article by the way.

    • 11

      I think your comment is backwards. Large menu’s that try to cover every page in an entire site can leave a non tech savvy person disoriented and confused. Pages can easily have similar menu names and become quite cumbersome as opposed to a really good search which is easy for any user to find what they are looking for (think google). The problem is, the search and tagging system has to be spot on and pages must be easily found.

  7. 12

    Seth Meranda

    March 27, 2013 5:00 pm

    Large-site navigation has been an issue we’ve wrestled with at the University of Nebraska-Lincoln for many years. We adapted a solution very similar to your hybrid approach and have found it to work quite well.

    For the entire site, only one navigation paradigm exists. It encompasses a mega-box approach for site navigation combined with breadcrumbs. The navigational elements are related to the current “micro-site”, and the breadcrumbs show the “micro-site” position in the tree (our approach to micro-site requires consistent UI/markup structure).

    The breadcrumbs also serve a functional role. Each breadcrumb is a link to a micro-site/page. When our user hovers the breadcrumb element, the navigation from the current page is replaced with the navigation from the micro-site/page found at the location in which the breadcrumb is pointing (a little AJAX/DOM parsing magic). Therefore, regardless how deep into the site a user is, she has access to entire site navigation without taking up extra room on the page. An example of this can be found at:

    Touch interfaces do provide an issue, and honest’y we haven’t solved for these yet. Nonetheless, the combined navigation with the extra breadcrumb functionality has both tested well and has proven to be very helpful to our users over the past 4 years.

    • 13

      Seth Meranda – I’m sorry, but your example is bad for usability. I think this article has some solutions that should be implemented for UNL. Props to Paul Boag!

      Stuff like: is completely confusing to prospective and current students visiting the website. If you are an employee for the college, you should know where you need to find things. Don’t put that type of junk on the public facing website! Microsites are the answer – yes – but you are not giving an example of a micro-site – your “micro-sites” all live in the same hierarchy, use the same navigation menus, and have the same design.

      Also, your breadcrumbs and navigation links don’t always share the same titles. That is confusing!

      • 14

        Seth Meranda

        April 16, 2013 3:11 pm

        Thanks Dave for your insights. Your referenced site ( is not a site geared towards students, it is a site dedicated to the 300+ developers across our institution.

        W/r/t the breadcrumb & nav not sharing the same titles, I completely agree. It is something we update as we come across.

    • 15

      Hi Seth. I have to agree with Dave. I applaud you for thinking outside the box, but your approach is rather confusing. It appears that you take a traditional layout approach with the placement of the top-nav and logo / name placement. Unfortunately the constant shift in “main” nav links (based on current position) , the change in logo title and no real visual indication of change beyond the subtle breadcrumbs, leaves me confused. I didn’t know where to click to find my way out once I started digging. When I did start to learn the process, I still found it a bit challenging to browse. Most of my attention was placed on learning the navigational process and less on the content. Should be the other way around.

      Please just consider this constructive criticism from peers.

      • 16

        Seth Meranda

        April 16, 2013 3:15 pm

        Thanks Brian, I appreciate the thoughts here.

        We’ve been giving a lot of thought to the titles: 1) for the institution and 2) for the current “site” (which is a college or department). The current juxtaposition does lean towards confusion, and is something we’ll be fixing.

    • 17

      As a user and not a web designer I find it confusing and wonder why the page refreshes each time I click on anything (and I assumed I needed to click on the arrow to get it to pull down). It doesn’t give me a chance to even look at anything before it takes me somewhere else!

      It’s very confusing and makes me wonder if there is something wrong with the site or my browser. There’s too much information clumped together in too little space. Too many options and way to many pages loading before I got the hang of it and I can’t find the page I was looking at 2 minutes ago without using my history.

      The graphics are great and the colors are great though.

      I wish you the best. You have a decent start. Best to you.

      • 18

        Seth Meranda

        April 16, 2013 3:16 pm

        I’ve never seen the page refresh on hover, this is not expected/intended behavior. If you recall the page, I’d love to look into it.

  8. 19

    I think an intelligent combination of traditional navigation elements can work pretty well. For example, limiting the primary (top) navigation to the top-most (parent) items, means a user always has a visual way to keep track of the major sub-sections of the site they’re viewing. A sidebar navigation that is limited to (and follows) the current context of the user allows for navigational depth without having to include every top level menu item. And finally, a breadcrumb is an excellent visual tool for users to keep track of where they are and how they got there.

    • 20

      I agree with Jake on the combo method. We’re beginning to take on larger sites and recently implemented the combo.

      I do like the idea of microsites, as well. Not sure if USA Today’s sections (News, Life, Sports, etc.) would be considered a collection of microsites, but I kind of dig its structure: A lot happening, but I’m not overwhelmed. Anyhow, microsites are good because they immediately ask one of a few questions: Who are you / From what perspective will you be viewing this site (prospective student)? What are you interested in (finances)?

      Not a huge fan of and the idea that you navigate by content. It seems there’s a lot more forced reading involved before getting what you want – ain’t nobody got time for that! Content is important and all, but a sound nav helps users access the content they believe is most important.

  9. 21

    I would love to see an actual example of Russ Weakley’s concept. I’m having a hard time envisioning it as a good idea without seeing an example.

  10. 23

    I like BBC’s idea of making micro sites.

  11. 24

    I think the site mentioned by Neal Griffiths is the best approach.
    It has a main navigation in the header (what is alway’s there).
    It shows the sub categories/levels from the selected main categorie.
    It have a breadcrumb navigation to follow back the navigation trace.So it brings you back to a point where you have seen more links you wanted to click.

    I think the combination is of the 3 is a logical choice.
    My experience with Fly out submenu’s, they never do what you want it to do.if move the mouse a little sloppy…. you have to start over again.
    Or they interact with the background to much that it starts to bug.

    • 25

      This menu is typical of what’s called the “mega-menu”. I also agree that these provide a great overview, I employ this most of the time on large-ish sites for navigation. But for some reason the article writer commented earlier that he doesn’t see mega menu’s as a proper answer to the problem, which I suppose is true but they are still a good option for navigation. A lot of people reading the article may not know about mega-menu’s altogether which would be a shame.

  12. 26

    I have to share my experience of navigation of my favourite e-shop. It is czech website without translation, though. But only for experience of the best navigation and user experience I recommend you to explore it: :) There is no way to get lost on the page. It’s soooo simple and brilliant. Hope I will create something similar someday…

  13. 27

    I am a fan of tabbed navigation (like this site: and this one: both of which have hundreds of pages and could easily grow and still be easy to navigate. Tabs are easier for users than drop downs.

    Tabs help keep it clean and unfussy, but still allow for depth. Which is as it should be. Breadcrumbs and search and special tools (like a course catalog widget) also help.

    For our education clients we often advocate the use of tabbed navigation. While the the top level categories are usually straightforward for most institutions, the Level 2 categories are varied, numerous and always different. When the user clicks on a tab, they can see immediately many special points of differentiation at a glance. It’s good marketing, good UX, and good design.

    And, guess what, I first saw the genius of tabbed navs here! : )

    • 28

      Tabs only work well if you have a very limited number of choices at the top level and the section titles are short but descriptive. They are not extensible past your nominal screen-size – which is a real problem for responsive sites.

  14. 29

    Darren Taylor

    March 28, 2013 3:18 pm

    Paul, we had the same problem on and took a similar approach to the old BBC Sport model you like, only showing siblings of the current page in the right nav when on article pages. Subsites/campaigns have their own nav and to date feedback has been positive. I’d appreciate your thoughts.

  15. 30

    I think the navigation approach you adopt depends on the purpose and intended use of the site. In cases such as news and shopping sites you generally want to support and encourage discovery and sideways movement. Therefore the navigation needs to be more open and explicit, so that users can explore the hierarchy on a whim.

    In other cases users generally know exactly what they are after and if they land somewhere the likelihood is it contains all they seek, e.g. Here the breadcrumb-only or Russ Weakley’s no-navigation approaches are very effective because there is more room for the actual content. Furthermore, they are less likely to be randomly drawn to something else before the task of reading/whatever the page is complete just because they suddenly notice it in the navigation. This is sometimes a good reason for taking away general site navigation when someone gets into the checkout process on a shop site.

    In my experience, we, as designers, tend toward the discovery style navigation because it’s a safer bet: presenting something users might need and letting them opt to ignore it is less likely to frustrate them than something they want being missing. However, if you’re ever in doubt that the no-navigation approach really does work very well in certain circumstances then you only need to look at Google or Wikipedia. Just try to imagine what a more menu style navigation would do in those cases!

    Nice thought-provoking article, Paul!

  16. 31

    I’ve personally seen major confusion and failings on sites that offer both a top navigation bar, or tabs AND a side navigation bar, particularly if the user can’t tell why or when the secondary vertical navigation bar is changing. The relationship between the two navigations isn’t always clear. I think it’s something that users can get their head around if they use the site for a while, but will they stick around if they get lost on their first visit?

  17. 32

    Jim Voorhies

    March 28, 2013 8:53 pm

    My prior experience (which was mostly within exceptionally large companies on intranet sites) is facing the issue compounding the mega-site navigation, namely mega-content. Large corporate sites normally can only get that big with lots and lots of content and lots of content creators, each generating content merrily and, sadly, seldom taking the time to prune or tag it. When you add to that the politics of “My content needs more prominence above the fold than yours,” space for navigation (and the willingness to fight the political battles needed to even use card sort results in the organization of it) almost compels three- and four-level fly out menus. Naturally, along with the poor tagging and content maintenance, the end result is that search is seldom successful either. Favorite internal links can easily become the navigation of choice.

  18. 33

    If I’m not mistaken this topic has been pretty well covered by the two smashing chapters in Book 1 and 3.

    The solutions provided there work very well for mega sites.

  19. 34

    Chad Miller

    April 1, 2013 9:07 pm

    Microsoft has demonstrated a solution to this very problem within explorer (which boostrap has now borrowed from). It is an elegant combination of breadcrumbs and dropdown. Only drawback I can find from this method is users inability to recognize its full capability with regards to functionality (which is the actual dropdown).

  20. 35

    Another example of a site with breadcrumbs that also operate as drop-downs showing siblings (and nephew pages too) can be seen at – it does have one advantage in that there is a pretty consistent hierarchy for all the content, something many mega-sites don’t have.


↑ Back to top