Main navbar and sub-navbar

Question

I have a website that has a main navbar (shown as the top/white navbar in the image).

Of the top navigation links, one of them takes you to another page that is much more customizable and offers many more features than the other (top nav) pages do. It warrants having multiple pages of its own, under it's own directory structure like so:

- MyWebsite
   - nav 1 (top-level)
   - nav 2 (top-level)
   - nav 3 (top-level)
   - <link to current page> (top-level)
         - nav 1 (second-level)
         - nav 2 (second-level)
         - nav 3 (second-level)
         ...

It would not be appropriate to make the <link to current page> be a dropdown / submenu to select nav 1, nav 2 such as those shown on the bootstrap dropdowns

Is there a more sensible way to have both of these methods of navigation separated without having "two" navbars? Currently it feels extremely wrong, possibly because there's a gap between the two?

UX is a familiar area of mine but I haven't ever needed two navs before. Would possibly a side navigation (or something of the sort - different than a 2nd top nav) help fix this issue?

I've seen images (which happens to be from a stack overflow question) where there's two navs, but the 2nd nav's content seems appropriate. In my instance the type of content is much different.

Appreciate any help, thank you.

Answer 1

The BBC split it's huge website into micro-sites. For example it's "Nature" or "Sport" micro-site has two rows of tabs Depending on the context, this navigation method may work for you. However it depends how related the contexts of your parent and child levels are.

This approach is recommended by Smashing Magazine.

Alternatively you could use a vertical side bar navigation for the top level navigation with top tabs for the second level nav. But this depends entirely on how much screen real estate you have to play around with.

Answer 2

You could consider a horizontal menu for global navigation as you currently have, and a second, vertical menu for the navigation that relates to the current space within the global navigation. This is ubiquitous in ecommerce and works well for users in that space (based on my 2 years in ecomm UX research). For example, REI uses the horizontal menu for their shopping categories, and the vertical navigation on the left for filters (which you could replace with your nav items).

Apple uses a similar layout for their design and development guidelines: