Manage multiple headers in one component

Design help Layout & Design
1

Hi guys!

So my question is: How is it possible to build a header component with a nav component inside that I can just change according to the page?

I am building a site that is based on a larger Figma style guide. It also features a variety of different headers that all base on the same header component in Figma.

For example like this:
header variant 1: Logo+Nav+CTA+Contact
header variant 2: Logo+BackBtn
header variant 3: Logo+Nav+CTA
…

In Figma I can just switch elements inside of the component “on” or “off”. So all is inside of a single component. Also the Nav inside of the header component is another component allowing me to switch between different menus. So I can just choose from Landing Page menu to Career Page menu with a dropdown in Figma.

Now that I want to build this in Webflow my goal is of course to only build a single component for the header to avoid unnecessary clutter in my build.

I don’t want to have multiple components of my header like:
header_home
header_landingPage
header_careerPage
…

So far this is the only way I see to make it possible. Does anyone have an idea how to make it work?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Following.

I have a similar need in wanting to have different headers for e-commerce categories. One one category I need it to say Delivery with 2 days and the other category to say delivery will be quoted at time of delivery.

https://preview.webflow.com/preview/a-thoughtful-thank-you?utm_medium=preview_link&utm_source=designer&utm_content=a-thoughtful-thank-you&preview=0297eb81c1de5b5998eb2718bcae4382&pageId=657b5adc31439d9a7f195acc&itemId=65830ed22d987e886f780924&workflow=preview

3

Similar to Figma, Webflow also has Components and Component Properties. I would recommend checking out this University lesson on them.

You should be able to build a single Nav component with all elements contained within it, set visibility properties on each of the elements, and toggle the visibility of each element for each instance of your Nav component. Very similar to Figma’s workflow.

4

Thanks for the answer!

I think I can do this for the most elements. But when it comes to the navigation it is getting kind of cluttered. This approach would require me to add all kinds of menus into the header and then use properties to enable or disable them. But the code will still be loaded, it is just set to “display: none”.

So I end up loading 5 different menus but only showing one. I think this is not the best solution.

In my option there should be an option to leave a “gap” or a “hole” in my component that I can fill with another element. This would enable me to build variations of my component and then I could select which one I want to use.

Also if you think about it, I’d have the different navigations that I could just select.