I'm working on a responsive Product Customization feature for an e-commerce website that has a hamburger primary nav, but will also need a secondary navigation for selecting the main Customization aspects of the product, and a tertiary navigation for selecting options within the secondary navigation.

Here is the desktop version of the Customization interface

enter image description here

And here is the current responsive design

enter image description here

The layout does not translate well to responsive, as the user is swamped with layers of Customization options. I've researched responsive navigation pattern best practices but have come up short.

What's the ideal way to handle having a hamburger primary navigation, as well as secondary navigation, and a tertiary navigation with options directly related to the secondary navigation?

  • I am getting a little confused by your question. Are you for multi-level side navigation? What is the "Customization" interface and why are there secondary and tertiary navigations? Could you clarify? Jun 16, 2017 at 10:06
  • @ShreyasTripathy Yes I am looking for a multi-level side navigation, but the site also has a hamburger primary navigation. The Customization interface is within the product details module, so it has options to select parts of the product to customize, and then different options within those selections. So example: diamond head -> diamond head weight options Jun 16, 2017 at 16:46

1 Answer 1


I keep sharing this a lot lately, but I think it might work:


  • Could you copy and paste the relevant information?
    – Mayo
    May 18, 2018 at 12:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.