enter image description here

In the above image top navigation bar and left sidebar is fixed. When I click on the option 6 it will jump to a section 6. So, the problem I'm facing is how do I translate this view into mobile?

  • You might need to attach your picture!
    – sclarke
    Dec 29 '17 at 10:19
  • @sclarke didn't get your point. I've attached wireframe for reference.
    – NB4
    Dec 29 '17 at 10:23
  • It wasn't visible when I opened up the question - maybe server lag. Guess I jumped in too early.
    – sclarke
    Dec 29 '17 at 10:38

There can be multiple approach to solve this problem, It will depend upon which action you want to take base of importance of each tabs. If you want to each and every tabs at same time and can't afford to hide any one then just dedicate one page so show all tabs and sub-tabs as expandable section and detail page will be different, else you can follow these approaches.

1. You can go for nested tab approach (Scrollable tabs and sub-tabs)

enter image description here

2. Primary tabs on top and sub-tabs in side.

Note: Sub-tabs can only be adjusted here if title can be represented with Icon or number.

enter image description here

  1. Primary tabs on top and sub-tabs as expandable accrodians In this case your you can show a long title for sub-tabs, and it you are worried about people not getting to know sub-tabs which not fit in view you can show an indication on either side for that.

enter image description here

with indication or other tabs hidden it can look like this. enter image description here

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.