2

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? – Shreyas Tripathy Jun 16 '17 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 – Alex Rivera Jun 16 '17 at 16:46
1

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

https://tympanus.net/Blueprints/MultiLevelMenu/

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

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.