I cannot find what the best way is to create a (dropdown) menu bar header that can be reused on the pages of the website and (potentially) can update automatically (or with an include/exclude selection) becoming part of the overall website. I did find your Symbol Reuse content in Builder.io using symbols - Builder.io explanation, but it does not go into easy and fast (dropdown) menu generation - although it does mention “If you have identical content (e.g. navigation, headers, footers, forms) that you’ll use on multiple pages, you can make this content into a symbol.”. I also did find the Dropdown Menu Template, but it seems standalone rather than ‘connected’. Obviously, you would want it also to automatically morph into a Hamburger menu (with the same contents) when a tablet or phone would be used. Any hints?
Hi @teeleh,
You are definitely on the right track! I think symbols would be the best use case for this, you could use the tutorial for creating a dropdown here: Making a dropdown menu in Builder.io - Builder.io and then convert the component to a symbol.
You can even make the symbol dynamic, I suggest reading more about creating Dynamic symbols here: Creating a dynamic symbol in Builder.io - Builder.io. With a dynamic symbol you can use your applications state as well as dynamic data binding to update your symbol as needed on different pages.
You should be able to achieve your desired responsive design as well by setting correct CSS in the various view ports provided in the visual editor.
Hopefully all of that helps, it is a decent amount to put together, but if you have more direct, specific questions we are happy to help!
Good luck, let us know how it goes!
OK - would be nice if builder.io team could create a few menu templates so you only have to fill in the blanks. The templates could showcase the flashy sample menus structures of the world’s top brands like www.apple.com or www.nike.com or www.gartner.com or www.rivian.com Even better: have a set of menu templates where you can select the look & feel similar to your pages templates. Also showcasing some animation, like the line that runs from left to right under a menu selection on the Rivian website. To make it even fancier: allow you to choose an existing website and builder.io reverse engineers the menu structure used and generates the closest setup. Similar to what is being tested now to bring in pages from around the web, just one step more advanced 