Very useful. The Webstudio builder features a Radix navigation menu, but it’s really basic. This is better. Thanks Alex. I think this type of basic and common components (navigation menus, footers, sliders) should be inside the builder too. Simple drag and drop. You may already be considering this. I also see an area of opportunity to include a “sections” option in the left side panel, that includes some hero sections, some footers, features sections, reviews section, etc.
Nice tutorial, thanks. Is there a way now for the elements of that menu to be auto-populated? With the titles and URLs for all pages, perhaps enabling a variable on each page indicating if it should be shown or not.
I like it. How can I highlight the current page link in red within the navigation menu on WebStudio? For example, when on the "About" page, the "About" navigation link should be highlighted in red. Webflow has "current state" for this.
Since edits made to the list inside of the slot affect both instances of the list, when I make the list visible on mobile it makes both instances visible. So I see both the hamburger menu and the list. What am I missing?
you can decide for each resolution if you are showing hamburger button or horizontal menu, you can also choose if you show the same items via slot in both or you keep the menus completely separate
@@getwebstudio hopefully there will be a better way to do it. So everytime we create a new page we don't have to copy paste header and footer again and again. very basic ask for any page builder, CMS-able or not. Also is there a tutorial to bind data from hygraph or something MENU to this menu please? thanks, great product overall
@@getwebstudio sorry if I'm not being clear. The nav menu you build in this video was not a Radix component, thus, is there a way to achieve accessibility when a Radix component is not used?
Webstudio is not a CMS, for a large blog you will want to connect to some CMS and we are releasing this soon. Same for online shops, webstudio won't have it built in, but it will Allow you building on top of platforms like shopify. Right now we need to make more content on how to do this and create templates, so stay tuned.
Great to see the pieces falling together, thanks!! 😁
Thank you. Great work!
Thanks Kev!
Very useful. The Webstudio builder features a Radix navigation menu, but it’s really basic. This is better. Thanks Alex.
I think this type of basic and common components (navigation menus, footers, sliders) should be inside the builder too. Simple drag and drop. You may already be considering this.
I also see an area of opportunity to include a “sections” option in the left side panel, that includes some hero sections, some footers, features sections, reviews section, etc.
We created a marketplace for templates for this.
Nice tutorial, thanks. Is there a way now for the elements of that menu to be auto-populated? With the titles and URLs for all pages, perhaps enabling a variable on each page indicating if it should be shown or not.
Thanks a lot! That’s a step by step perfect tutorial. Keep up the excellent work.
Thank you superstar! And thanks again for chasing down the OVH stuff
Hallo can you create tutorial all about breakpoint? and how to make website fully responsive? thanks
thank you , we need more tutorials
More incoming!!! 🙏♥️🔥
thank you!! loving Webstudio!!!
Thank you M!!!
I like it.
How can I highlight the current page link in red within the navigation menu on WebStudio? For example, when on the "About" page, the "About" navigation link should be highlighted in red. Webflow has "current state" for this.
I think you can do it with the "Active" state (just like the hover state)
Since edits made to the list inside of the slot affect both instances of the list, when I make the list visible on mobile it makes both instances visible. So I see both the hamburger menu and the list. What am I missing?
you can decide for each resolution if you are showing hamburger button or horizontal menu, you can also choose if you show the same items via slot in both or you keep the menus completely separate
Thanks alot 🎉
👍
❤
Now if my links go to different pages in webstudio, how do I get the same menu bar on each page?
Wrap your nav in a Slot component then copy and paste Slot and it stays in sync. docs.webstudio.is/university/core-components/slot
@@getwebstudio hopefully there will be a better way to do it. So everytime we create a new page we don't have to copy paste header and footer again and again. very basic ask for any page builder, CMS-able or not.
Also is there a tutorial to bind data from hygraph or something MENU to this menu please? thanks, great product overall
@@MustafaSheikh slot component allows you to link the same navigation/footer. It's not a copy, its a reference.
I want to switch to Webstudio, I really do. But I can't until I can understand how to create something as simple as a dropdown menu link.
Add Component > Navigation Menu. Comes with dropdowns
How to make menu section stick when scrooling
Use position fixed, set top to 0
How do you deal with accessibility?
Its mostly taken care of by Radix UI www.radix-ui.com/primitives
@@getwebstudio specifically for this nav menu implementation?
@@teaman7v webstudio.is/radix
@@getwebstudio sorry if I'm not being clear. The nav menu you build in this video was not a Radix component, thus, is there a way to achieve accessibility when a Radix component is not used?
Can I make a store in Webstudio?
Can I do a blog?
Webstudio is not a CMS, for a large blog you will want to connect to some CMS and we are releasing this soon.
Same for online shops, webstudio won't have it built in, but it will Allow you building on top of platforms like shopify. Right now we need to make more content on how to do this and create templates, so stay tuned.
good
Hopefully you have moved your microphone from OFF your desk.. the keyboard pounding sound is REALLY LOUD