Second navigation level with pills

Question

Not sure why I'm struggling so much with this :). We're using horizontal pills navigation on a site I'm working on (like this: http://getbootstrap.com/components/#nav-pills )

I need to add a second level of navigation within one of the navs. A second layer of pills doesn't seem like a good idea because it won't be clear that they are associated with the main selected pill (and will just looks weird visually).

Also vertical pills won't really work because I have a video taking up most of the screen and there is no more horizontal space left.

I considered a dropdown selector but the downside is that you can't see the other options without selecting the dropdown.

Does anyone have other suggestions? Any examples of this on other sites or any other stack exchange topics that may help me out?

Thanks in advance!

Answer 1

A good way to solve a horizontal sub-menu is as @Sheryl proposes with a second level of horizontal elements. In that case the menu header elements work like tabs. If this is not an option as you say in the question, I can think of including the sub-menu in the same line as the header menu, which opens/closes on click of the header element.

Item1 ▼      Item2 ▼      Item3 ▼      Item4 ▼


                      ⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻
Item1 ▼      Item2 ▶      Item2a      Item2b      Item2c      Item3 ▼      Item4 ▼ 
                      ⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻

Answer 2

To me the best solution seems to be a classical dropdown with a good labeling. Of course users wont see what is in there, but it is something expected. If you do a good job with labels there should be no major issues.

Answer 3

I think something like this should work: http://www.apple.com/tv/ https://www.playstation.com/en-us/explore/ps4/

Where you have two navigations. Main navigation and Sub-navigation.