Preview I got so far of both Navigation Bars

First I'll show the preview of what I got so far. I'm trying to find an equilibrium in the page I'm slowly developing (an online university). I'm showing here both of them. As you can see, it doesn't look really good:


Note: the page is in the middle of a redesign, being the second navigation bar the only thing implemented so far. Many things are broken now, but feel free of giving me any extra tip if you want (:

Navigation menu

IMHO, it has these advantages:

  • Jumping from one section to another fast without previous knowledge of the site's structure.
  • See enough of the site's tree to know if you are interested in it just by hovering over the menu.
  • You can put generic elements there, providing there's no other place, as the search bar and login/profile link in my case.
  • Users see this in every web.


This navigation bar is also very useful. The main advantage it has is that it allows to jump up a level. Say the user wants to go up one level to see other kind of resources (Theory of Relativity has: "Text", "Videos", "Equations", "Exams", etc), or two levels to see related subjects, then he can just do that with a click. Also, users are used to this schema from the file explorer in the computers. More information.


Do you have any recommendations on how to integrate both bars? They can be merged however you want, but both should still be on the top, no side menus are allowed.

Possible solutions

These are the 2 ideas I have:

  1. Delete the breadcrumbs menu and only put a button on the left saying "Go back to the Subject" (in this case).

  2. A preview of my second idea. This is: deleting the navigation menu and, when hovering over the breadcrumbs, making a dropdown sub-menu with siblings for each one show up. So, if you hover the "Subjects" in the bar, then "Degrees" and "News" are shown. Search and user are always shown on the right. Please, check the preview as it's difficult to explain but IMO it looks really slick. Could it be counter-intuitive in the way it is now for uninformed users? How could I make it more intuitive? Edit: this second option is heavily discussed here: Better approach to blue/underlined for link?;

Edit: The question doesn't show any research efforts, but I've been a LOT of tutorials/tips on how to make a proper navigation bar. Although I haven't learned how to combine it for this case.

2 Answers 2


I think what you call the relative nav bar is more commonly called breadcrumb navigation. I don't remember ever seeing a combined main+breadcrumb navigation. They have distinct purposes, as you mention. I think it's a good idea that they stay as distinct components, but if you have a good reason to combine them maybe searching for breadcrumb navigation combined with main navigation or some such will give you some ideas.

  • I found this question and I'm reading a lot of information now because of you naming it, thank you! Jul 19, 2013 at 4:00
  • After some testing I decided to ditch the breadcrumbs approach at the end and will place a "Back to X" button and a traditional menu. But this is a very helpful answer so I accept it. Jul 24, 2013 at 21:38

The article on Smashing Magazine dealing with Breadcrumbs provides a pretty comprehensive overview of all the issues that has been discussed, plus it provides some good examples.

  • I found it googling after @obelia answer, but thank you nevertheless. Jul 24, 2013 at 21:36

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.