6

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!

  • 2
    I'm curious why you said second level nav wouldn't work. Why don't you post a mock up of what you have done so we can advise you accordingly. – adamsoh Apr 28 '16 at 5:51
  • UX First, Not Design - I would suggest you focus more on UX first and jump onto designing later on. Choosing the right menu type is a key UX factor, there are different types of menus like 1. Linear 2. Mega Menu (Square), etc. – Deekshit-CUA Oct 25 '16 at 10:09
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 ▼ 
                      ⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻
0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.