we are redesigning our webbased software product. All main tabs (called: modules) have the same layout: In the upperleft of each they have a breadcrumb and the page title.

Most modules have a second navigation level, represented by a second horizontal tabbar as shown in wireframe A

Our configuration Module also has two levels, but here the second level has just too many pages for a horizontal tabbar.

Vertical tabs could be a very good sollution. See wireframe B.

However, the vertical tabs make the title and breadcrumb shift to he right. that doesn't feel too consistent to me! Because of this, I prefer to place the vertical tabs on the right of the page. Wireframe C

Is placement of vertical tabs on the right side wrong or 'not done'? Does anyone have some insights about this?


download bmml source – Wireframes created with Balsamiq Mockups

3 Answers 3


I have always used B with good success. I wouldn't worry about the breadcrumbs moving; they're in a relatively similar spot (top left, above the page title) and it's not as if someone won't see them because they moved 200 pixels right. Placing the nav on the right risks people not seeing it and I might even argue that it doesn't properly set the hierarchy of nav & content.

  • it's not as if someone won't see them because they moved 200 pixels right Ok, that one puts it into perspective for me! thanks!
    – Maarten
    Dec 3, 2012 at 11:48

In an application we have developed, we have the same issue. The approach we have used is Wireframe B. Overall it is quite convenient, and from what we gather from feedback, users have no problems understanding it.

The major problem that we have is that sometimes we do not have "enough" horizontal spacing to hold the forms, since we still target 1024 screen resolutions. So this is something that you should keep in mind as well.

I would suggest Wireframe B however, since I personally think it is more familiar to most end users. Whereas, Wireframe C, with the tabs on the right is not that common, so many users might not get it at first.

  • Horizontal space will be the next challenge for sure. and by the way± vertical (direclty followed by vertical space of course...)
    – Maarten
    Dec 3, 2012 at 11:53
  • Well the vertical spacing won't be a problem probably, since users are used to scrolling up and down in browsers. Whereas horizontal scrolling is more of a nuisance. Dec 3, 2012 at 12:16

I use Microsoft One Note which use your B sample it seems natural. Have a look.

Microsoft One Note 2013

  • That's nice, but is there any proof of that this is a convention in other applications than Microsoft apps? I like your answer, but I think you need to elaborate a little on the topic and possibly add an image and a reference too?! Nov 30, 2012 at 6:55
  • Isn't that actually the "C" wireframe, with tabs on the right? Nov 30, 2012 at 19:34
  • I've had a look at Microsoft OneNote. It's funny to see they combine A, B and C. The only thing missing are bottomtabs. They are getting close to the ´surounding Tab Design Pattern!´ The images you've uploaded however only shows A and C.
    – Maarten
    Dec 3, 2012 at 11:43

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.