Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have a layout similar to the below screenshot. Where the top nav will get collapsed using hte Twitter Bootstrap Nav Collapsed. Also i have a secondary menu below the nav bar on the left hand side which is important for the navigation.

Which is the best way to hand the same on a Tablet and Phone sized Screens?

screenshot

share|improve this question

2 Answers 2

Amazing how I've never thought about this 'conundrum' before, but it's intriguing. Here are the possible solutions I could come up with:

Two menu buttons
My first thought was to put the sub nav off-canvas to the left. Leaving you with a menu button on the right for a dropdown menu of the main nav and a menu button on the left for the off-canvas sub nav. But that's the whole problem with it, it leaves you with two different menu styles which is confusing at the least. You could solve this with a secondary header and another drop down menu.

Merge navigation
My second thought was to merge the two navigations. You can do this when there is a clear hierarchy with the parent link in the main nav and all child links in the sub nav. The structure will look something like this:

Dashboard
    Account
    Subscription
    Billing information
    Account members
    Careers page
    etc.
Candidates
Agenda
Reports
Activity

This won't work when the links in the subnav have nothing to do with the links in the main nav. This would however be my pick and would even advice revising your navigational structure.

Leaving subnav visible
The last solution I could think of is leaving the subnav visible on the page, but changing it to a horizontal, smaller navigation. This will put more distance between the content and the main header with the main menu so it might not be preferable for you.

Here is some further reading:
Responsive design Pattern for secondary navigation - is there a way not to swamp the user?
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/

share|improve this answer

One solution would be to collapse the Primary Nav, as you currently have planned and to simply stack the secondary nav items.

enter image description here

The reason for this approach is given that there will be numerous actions involved in most of those items such as text input, dropdowns, saving, etc., you'll want to make use of the little real estate you have available, but yet allow the user to focus on one thing at a time.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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