Alternative to many tabs besides accordion/expander

Question

I have 2 levels of data. Menu and Food. My current design looks like this which is taken from ui-cloud.com

The problems I had with this design are:

1. It assumes the number of menus are fixed when it is not (can be up to n menus).
2. It doesn't show all Food item in each Menu at one go.

In order to solve this, I tried to design using Accordions/Expander with all the panels open:

It seems to solve those two problems but I'm wondering if there is any other alternative design (or improvements to the tab design) that I can consider?

Answer 1

Since, choosing the menu and then food, and then food item is a sequential process, why not design it that way.

Not to forget, number of menus is not limited and might exceed 3

Remove all tabs, have your first screen similar to the screenshot shared. Instead of the "food" list, have a list of "menus".

Once the user chooses the menu, take him to the next page/screen allowing him to choose the food, and then the final screen for the food items.

The upside of this is - it is a very logical, sequential flow of itesm. Removes the upper tabs

Downside - it increases the clicks for the user if he wants to switch to different menus and food very often.

From the final screen, he will have to go back to the menu screen to choose another menu.

It would be interesting to check how many users, go back and change "menu" options. If not too many, then the above might be a good alternative to your approach

Answer 2

There is an option that I am using for my breadcrumb bar on my website.

I decided to use Google's method of scrolling the bars horizontally!

You can search online for this and I wish I had time to find something for you. Basically you can add a horizontal scroll and if you want to get particular, you could use JavaScript to program arrow buttons to scroll between sets of buttons, based on the number which fit within the parent container, adding the widths of the ones visible.

If you decide to use JavaScript note that it may be problematic using cross browsers, so test vigorously.

As I said, I wish I had time to find something online to help you. But if you don't want to add any vertical depth to your navigation, going horizontal is your only option.

Hope this stirs up some ideas for you! Best of luck on your project!