How to build a mega nav?

any suggestions on building a mega nav? I need essentially the same - a component with 5 dynamic slots for product or link stack

I was hoping to accomplish with variants but i kept tying myself in knots

my only solution now is creating a shared MegaNav component - and then a unique component for each product category

Do the product categories come from a CMS or are you just defining them in the Studio?

defined in the studio

ah okay, have you seen our pre-built navbar?

might be a good example to adapt to your needs?

yeah no i think this is a bit more complex. each collection, when hovering it, will have different info under it

can hover over tops, denim, etc. notice each one is unique

yep totally. I think you’re on the right track, I would probably just make different variants for the navbar, and then add a bit of code such that on hover of each collection, set the variant you want to show

if you want to abstract out the popup into a separate component, it might make it easier to keep organized, but not necessary

i’d love to keep it in variants, but how would i customize the specific products/lists in them?

this is the part i can’t unlock in my head. it’s like i want an “Instance” instead of a variant

ya totally, the simplest way is to duplicate the product list a bunch of times in MegaNav (each copy with different products) and in each variant toggle which one is shown. (kinda verbose and hefty but very explicit).

What I mean by abstracting out that out into a component, is you can create a component that represents the bottom half (let’s call it NavExtra). So let’s say MegaNav contains an instance of NavExtra. Then you can make a bunch of variants of NavExtra that stores the different product lists. Then from MegaNav, you can select which variant of NavExtra gets shown. It’s a little more organized that way I think

the id prop that’s set on say, ProductBox - is that unique to variant? Could i put 1 link list and 1 product list in each slot?

oh that could work too, lots of ways to do it :slightly_smiling_face:

oh really that’d work? that’s not too bad lemme give it a try

i have a similar problem in the new targeting tools. i love how it’s all set up, but i can’t do unique targets without having a kitchen sink component.

i’d really like to define a “Banner” component, which is just a flex with slot target - then design 5 totally different instances of it, and be able to select which instance is rendered

oh yeah i dunno if that works. i mean it probably works fine but the amount of content we’ll have i don’t think we can do it this way. changing the content in the variant in record mode still bubbles the changes up to Base

I think you’re referring to the topic in this thread right?

We are iterating on how split content is defined, and definitely taking this feedback into consideration as we iterate