I'm developing a little hybrid mobile application, it is an e-commerce app, I've designed all from scratch. I am designing it in such a way that the admin at anytime can add categories and subcategories, and so on. There could be cases like this (although they may be a bit rare cases):

Category 1
  Category 1.1
  Category 1.2
  Category 1.3
    Category 1.3.1
    Category 1.3.2
    Category 1.3.3
Category 2
Category 3

I would like to know what is the best way to do this? As a CSS framework I am using Materialize.

How would you advise me, to browsing this section?

Initially, if they were just categories (without children). I would make an accordion, or what in Materialize is called Collapsible. And then when the user clicks on an item, a list with all the products is opened below.

What are the best practices on this type of applications? Should I just show a small list of products and when the user clicks, go to a specific page of that product?

  • This is for view mode only, no editing or rearranging them right? – Alvaro Jan 11 '17 at 16:19
  • Yes, this is the view mode only. That is, what customers will see, not what the admin will see. – alessadro Jan 11 '17 at 16:20

I think this type of mobile menu would help your case? https://tympanus.net/Development/ResponsiveMultiLevelMenu/

Would prevent any scrolls or long section in your navigation menu and sure will enhance your user experience using your app, my concern about default dropdown if you have many child-menus is you must have a good padding for users to tap the menu, but if you are using this type of interaction, you can maximize the menu padding without worry about long of the menu section.

  • 1
    This seems to be just what I need – alessadro Jan 11 '17 at 17:55
  • @Alessadro glad this help your problem!:) – Rob H. Yamin Jan 12 '17 at 1:54

As you are using Material design as a guide I recommend you check Navigation patterns. According to it Nested Navigation should only be used on desktop.

As far as I know there is no way to use such navigation on Mobile inside this guideline and the reason is probably to avoid complexity in the layout. The way I've seen it in Google Apps such as Play is combining the different methods such as tabs, bottom navigation, etc.

  • I wonder, should I allow the user to have multiple subcategory levels or force them to a single level? For example, Amazon does not have as many sub-levels, it has maximum two – alessadro Jan 11 '17 at 17:21
  • Only children, not grandchildren – alessadro Jan 11 '17 at 17:21
  • 1
    @alessadro This will depend on the case. It might be better to combine a parent-children (only) with tags to simplify. But you might have a case where those grand children are necessary... – Alvaro Jan 11 '17 at 17:23
  • Could you show me some reference link where I can see examples of this? Please. – alessadro Jan 11 '17 at 17:26
  • 1
    @alessadro I just meant generally. I recommend you check Google apps as well as Material awards in case you find something similar to what you want to achieve. – Alvaro Jan 11 '17 at 17:30

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.