Hi!
Just following up on the great “Ecommerce Breadcrumbs” tutorial from @matthewpmunger - I’m wondering how to show all Ecommerce categories/sub-categories/sub-sub-categories created/organized as breadcrumbs within an intuitive, visually navigable dropdown menu?
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hey @acl92 thanks for coming to the forum.
Were you able to review the tutorial?
Also I did record a video version if you prefer to learn that way.
With this method of using single-reference fields for each level, it’s possible to go any number of sub-categories deep. For the dropdown, place collection lists inside of the menu and connect them. It’s similar in process to the breadcrumb nav just a different component.
After you’ve created your CMS structure and have some sample data to work with, then myself and others here on the forum can further assist you in creating the dropdown if need. Please share your project’s Read-Only link.
Thank you @matthewpmunger for your helpful reply here! I’ve created the CMS structure and there’s plenty of data to work with now - and yes, I’d love to get some assistance creating the dropdown with all the categories/sub-categories contained within please! As an example from the data, we’d like the organisation to follow this logic: LIVING > LOUNGES > SOFAS > WOOLLAHRA.
Here is the Read-only link:
Hi @matthewpmunger - just checking if you saw me recent reply/query above?
Thanks again!
Hey @acl92 sorry for the delay. I recorded a video walking through the basic steps to structure the nested dropdown. There is one piece of the data relationships missing that prevented me from creating the full structure. Add a single reference field to the Departments collection in order to define which product Category they belong to. Between adding that relationship and the video, hopefully you will be able to get most of the way there with building the component out. Reach out after that and I can explain further if need be.
No worries @matthewpmunger - appreciate your expertise and time in getting back to me!
Following your suggestion, I’ve gone ahead and added the single reference field to the Departments collection to define which product Category they belong to, and that’s all linked up now.
For convenience sake, instead of having all Categories>Departments>Types dropdown from the OUR PRODUCTS nav-menu link, I’ve created main nav-menu links for the Categories of LIVING, DINING and BEDROOM.
So now the first tier under the nav-menu LIVING dropdown will be the Departments (Lounges, Coffee Tables, Side Tables etc), which I’ve gone ahead and organized through a CMS Collection List, following your video walkthrough. I left the extra Lounges dropdown menu within the LIVING dropdown and filtered out the other “Lounges” department that was sourced through the CMS list (so I didn’t have a double-up).
Could you please tell me if I’ve set up the right structure to make my Lounges dropdown (within the larger LIVING dropdown) open/show its contents on the right, like in the rh.com screenshot I’m attaching? And I don’t want my Dropdown List to be opening up so wide and taking up unnecessary space - I’d like to have the Dropdown List tighter, like in the rh.com screenshot attached.
Also, what do I need to get these dropdown menus to integrate seamlessly into the tablet/phone hamburger menus and have them displaying properly?
I have a deadline for the project this Sunday, so a reply at your earliest convenience would be super super helpful!
Looks like you’ve made good progress 
on the structure and design of the menu. Let me know if there’s anything else. Happy designing!
Hey @matthewpmunger - I need your help please!
What do I need to get these dropdown menus to integrate seamlessly into the tablet/phone hamburger menus and have them displaying properly? If you have a look at the way my current hamburger menu is displaying (looks like a mix of horizontal and vertical), you’ll hopefully see what I mean.
I’ve tried to organize the hamburger menus according to what looks best (vertical arrangement of the nav menu items) but when I try styling them specifically, it affects the Desktop breakpoint - I thought higher breakpoints don’t inherit styling from lower ones?
Thank you so much!
@acl92 complex navbars like this can be tricky when it comes to responsive design. I have two recommendations at this point since you’ve conveyed there’s a deadline.
Once you have a navbar that is functional then just add the styles from the furniture site to it.
Another option to think about is building two separate navbar components that target desktop/tablet and another for mobile. They using the css style display:none to hide/show the appropriate navbar component based on the breakpoint.
