Is there ever a use case for mixing a full-width top navigation bar (meaning the navigation bar content is also full-width) with a contained body (around 960px)? What are the benefits or drawbacks to doing so in terms of usability and design?

IMO, it should either be full-width or contained, but not both because mixing would cause usability issues:

  • Quick scan-ability isn't possible because of the difference in alignments.
  • The disparity is especially bad on wider screens, forcing more eye and mouse movement to even use the navigation bar elements. This could minimize the effectiveness of the navigation bar.

Still, I'm interested in exploring the idea further. Are there any websites that have pulled this off successfully?


Here is an example mockup of what I'd like feedback on:

mockup of top navigation bar and content 960px wide

Edit Redux

Some examples have been given, but the heart of what I'm after is if this is a good idea and, if so, when it should be used. Even though Google does it, I'm not convinced that this is actually a user-friendly design pattern.

  • 3
    The only time I can recall seeing this mix is in those terrible <iframe> sharing topbars: it definitely makes the page look and feel disjointed.
    – msanford
    Commented Apr 26, 2012 at 17:51
  • This sounds like the beginning discussion of an iPad or other tablet UI. I would spend a few minutes browsing the Android, iOS, and Amazon Kindle marketplaces for some screenshots or examples.
    – Mike Hill
    Commented Apr 26, 2012 at 19:11
  • It's actually not specifically for any mobile or tablet device. Just a normal website. Commented Apr 26, 2012 at 19:24
  • any examples? can't think of any site with full-width navbar content i.e. there are many with full-width navbar but its content would still be well-aligned
    – Oleg
    Commented Apr 27, 2012 at 1:51
  • 1
    like google.com and 37signals.com
    – Emil
    Commented May 11, 2012 at 6:47

4 Answers 4


If you consider Google to be a successful company who have started to shape up on User Experience the last year, then that is your answer. They implement a full width top navigation bar on all of their sites, and some of the content is narrower and centered in the middle. It looks like the pattern in your question.

Google full width navigation bar

Google bar’s updated look

Posted on Googles support site one can read:

The Google bar is made up of two parts: A dark gray bar where you can click to access various Google services and a light gray bar to help you search, share, and manage your account. [...]

The light gray bar may contain a search box for the Google service you are currently using. If you are a Google+ user, to the right you will see a share box and notifications icon to participate in Google+ from any Google page.

Google have had a lot of comments to remove the bar entirely and made a try in november last year (2011). But that design (a hover drop down menu) where even more refused by the community. Google had to go back to the black bar again, but are asking the community what to do instead.

From my own personal view I like the black bar since I always know where to find my Google services. The "community" isn't always right, but they make a lot of noice. I think it's safe to use the browser window wide navigation bar on the top - since users can always find what they need with only one click.

  • Do you know if Google has published anything on why they decided to go this route? Commented May 10, 2012 at 23:22
  • @VirtuosiMedia It's very hard to find the original idea of the bar, but I've made my best to edit the answer on what's going on at the moment. I hope it will be useful to you. Commented May 11, 2012 at 6:25
  • 1
    @VirtuosiMedia Jon Wiley presented it at UXweek, the video is available at uxweek.com/2011/videos That's the closest thing to a "rationale" that I am aware of.
    – Daniele
    Commented May 11, 2012 at 8:01
  • What is interesting is that it does give a degree of separation between the bar and the content, which I suspect is deliberate. Google wants to be the portal for everything, not just a search engine provider. So they have the top bar indicating all of the things they do, and the trivial content of the actual process comes below - sometimes full width, sometimes not. Commented May 11, 2012 at 8:48
  • 1
    really good example, google have got this hierachy technique spot on
    – cwiggo
    Commented Jun 22, 2013 at 21:01

I have used such stuff in some of the designs I have done.

In my opinion based on some of the research work done, both the things can be mixed if they don't have a direct relationship between the two.

Like in case of google, the content on top bar has no direct relationship between the content and the navigation on top. It can be termed as additional featured which doesn't effect even it removed.

I once designed a website where the user needed to login to access some of the content of a website. The website was already designed and I was working as a consultant to determine the drawback and give suggestion to some of the new featured introduced. My take on that was since the website layout remains the same and only the content of the site changes based on the login then it is better to use a dark top bar where we can list the user profile and edit option and keep the site below that. It actually acted like a toolbar which never interfered with the overall design of the site.

As for the alignment and scanning, since these are very rarely used option the user had no problem accessing them.


Currently the New York State Department of Labor uses a "full-width" persistent navigation bar for its persona based navigation (mega menu) at the top of the screen. Once you reach a more content specific area, an additional side bar appears to the left. The side bar then provides users with a form of content specific navigation.

Top Navigation

Labor home page showing mega menu

Side Navigation (Area in white denotes selected/current page)

Labor page showing side navigation

  • Thanks for the answer, JeffH, but this is actually an example of a navbar where its content is contained and not full-width. While the navbar itself is full-width, I'm looking for examples where the navbar content is also. Commented Apr 26, 2012 at 20:36

If you want to check out an example play around with Swipely (you'll have to make an account to see the regular UI). I personally don't think it's a "bad" experience but not sure it adds much.

I can see a use case on a site a lot of text content where is may actually be beneficial. Content is contained within the body area and scrolls. Menu/buttons are pushed out to the sides to create a more "distraction free" reading environment. It's a stretch... but could be useful in some situations.

  • I only saw one page where it was mixed, the rest was either contained or full-width. I think that site has quite a number of usability issues, though, one of them being that they switch back and forth between full-width and contained content from page to page. Nothing is ever in the same place. Commented Apr 26, 2012 at 22:14

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.