Skip to main content

Best way to display categories tree in mobile apps [Resolved]

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?

Question Credit: alessadro
Question Reference
Asked September 10, 2019
Posted Under: UI UX
2 Answers

I think this type of mobile menu would help your case?

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.

credit: Rob H. Yamin
Answered September 10, 2019

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.

credit: Alvaro
Answered September 10, 2019
Your Answer