2

Say your IA hierarchy is like this:

  • Main section A
    • Feature 1
    • Feature 2
    • Feature 3
  • Main Section B (List/tableview)
    • Item
      • Detail 1
      • Detail 2
      • Detail 3
  • Main Section C

The traditional iOS-style approach would be to use a Tab Bar at the bottom for the Main Sections. So far, so good. My question is, where does the sub-navigation for the Detail views of the Section B items go? Are there any canonical examples of this? One approach would be just very short lists in a table view, but that seems so lame and outdated.

This would also apply to the Features of Main Section A. Perhaps a subnav Tab Bar but above the content, below a top header?

  • 1
    Welcome to UX.SE. I'd suggest adding a wireframe to help the community understand your layout as some of the terms Tab Bar, Main Section, etc are more ambiguous that you might think – tohster Jun 12 '15 at 21:38
  • It's pretty late but...you have a good example of this on UX site itself. Take a look top bar with "Questions Tags Users..." and how its content/siblings change. – Adriano Repetti Nov 10 '15 at 11:15
  • @adriano, The mobile UX is really nice, but it doesn't have the problem I'm having—subsections underneath the main sections (i.e. Questions, Tags, Users...) – T3db0t Nov 11 '15 at 19:31
2

In addition to philip's answer, there is also an other implementation. I really like the the 'pushover'-style. You can find a demo and tutorial here. The tutorial isn't for a mobile menu but the idea remains the same.

enter image description here

0

The most common example of handling navigating to children on mobile would be the traditional hamburger menu. You can continue expanding as much as required. Note the "+" next to "Image Gallery" which will expand another list of children.

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.