My organisation, which provides information and advice, is starting to sell things online as well. The 'shop' will be run on a different platform and is effectively a different website (but will be branded to look like our main website).

Our current website's global navigation (horizontal tabs) is topic-based, eg 'Money advice', 'Health advice' etc. We want to add 'Shop' to the navigation. But if the user clicks it, they'll be taken to the retail site, which has different horizontal global navigation (eg 'Kitchenware', 'Gardening' etc).

I feel like this breaks the 'tab' design pattern - if you click a tab, you don't expect the rest to disappear.

But if we change the design of the shop enough, it should be clear the user has been taken to a different site - so will they still be confused?

A similar example is http://www.redcross.org.uk/

  • As an example Fox News' series of sites does this fairly well: foxnews.com the very topmost nav bar is all links to "other" sites but they're all the same parent brand (Fox), all maintain the topmost navbar and general navigation structure.
    – Ben Brocka
    May 3, 2013 at 12:34

2 Answers 2


While you could probably get away with it, it is a bad idea.

If you're going to use a well know pattern like this, it raises an expectation about its behavior. This is why patterns are so powerful and useful: users will recognize them and immediately be able to build a mental model of the way your website works.

If you break this pattern, you break all understanding your user just built up about how to navigate your website. Instead of a site structured by a number of main subjects listed in the global navigation, who knows what the structure is if some of those items in the list are something entirely different?

If you have a lists of things you can click on, and each thing looks the same, clicking each of them should have the same effect (e.g. open a new page below the tabs).

It's ok to add a button to that list, and it makes sense in a lot of practical ways, but make sure it stands out.


download bmml source – Wireframes created with Balsamiq Mockups


It is absolutely okay to chose that pattern. The only thing you should worry about is making the link different enough from the others that user will know that something else will happen once he/she clicks on it.

The easiest and least subtle way to do this would be to style the tab completely different from other tabs — for example like a link:

Mock-up of site with two tabs on the left and a 'Shop' link to the right

Or you could just move it a bit further from the other tabs (and maybe highlight it differently?):

Mock-up of site with two tabs on the left and a 'Shop' tab on the right

Choices are endless — just remember, if the tab will be styled the same as the rest of the navigation, the user will expect it to behave like the other items in the navigation. And once he/she clicks on "Shop" he/she would probably get frustrated and irritated by your UI behaving differently from his/her expectations (changing the entire site instead of changing a section of current site).

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.