The original design uses horizontal tabs for categories that are not related, and vertical tabs for pages that are sequentially related. In terms of usability and navigation I think it is not as intuitive as replacing the vertical tabs with a breadcrumb or progress tracker for the user to follow. What is the best way to present this type of navigation/menu?

To help clarify the question, the horizontal tabs contain the higher level hierarchy, and the vertical tabs contain the lower hierarchy. That is, when you select from the top tab, you get a range of vertical tabs that are displayed as a result.

enter image description here

  • 2
    Are the two sets of tabs operating on the same body of pages? Or are one set subcategory of another?
    – JOG
    Commented Apr 18, 2013 at 7:46
  • This is a subjective question. The answer depends on too many things, including designer preference.
    – elemjay19
    Commented Apr 18, 2013 at 22:50

2 Answers 2


I would say that would be a matter of design. In your mockup all tabs are aligned directly to the page. Being horizontal or vertical doesn't imply any hierarchy, so all tabs look like they could work on the same level.

Either approach could would as long as you're clear about the hierarchy.


download bmml source – Wireframes created with Balsamiq Mockups


The most successful program that I know of with both horizontal (top) and vertical (side) tabs is Microsoft OneNote.

I have used OneNote extensively and been active in a community of users, and I have never heard anyone complain that their tab system was a problem. It has been tested and refined over many versions and uses the following system, which I would recommend:

  • Side tabs (vertical) are used for unrelated subjects. They could be things like: school, work, or home

  • Top tabs (horizontal) are used for categories within the subject of the side tab. If the side tab were school, they could be: math, astronomy, or history.

enter image description here

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.