Ultimate Nav Component for Webflow

[@jonasarleth]

So many great functionalities in one simple nav component! Love it!

[@TheMezmeriZe]

You must have been sent from heaven itself. Thank you!!!!!

[@thevikingsock8527]

show how bad webflow is, that this isnt standard, despite how much they charge for every little thing.

[@timdaff]

Confirmed in development this this week. This navbar system is sensational and is so so good as a Component system. Can’t wait to start playing with gsap’ing it next!😊

[@HORDERARII]

insane. Thank Timothy for this

[@danilorastovic3838]

And again, Webflow beast gives us an absolute GOLD

[@porushpuri]

Absolute Legend for creating this!

[@skylartkitchen]

Yesss, been waiting for this!

[@pavel538]

Exactly what I need right now! Thanks a lot.

[@bpodkowa]

Thanks Timothy for such a comprehensive component product, I was already developing following the hints from your clips regarding navbar topics. Unfortunately I’m used to ClientFirst framework rather than Lumos and always try to rebuild your concepts with the use of CF naming logic conventions and will try this time too.

[@TheJakeTKD]

Love it!! Would you ever start a component library like Relume for Lumos? I would definitely pay for this

[@timothyricks]

Thank you! I'm working on a small Lumos Component Library for now. We'll see where it goes.

[@TheJakeTKD]

@@timothyricks Amazing! Can't wait!

[@silvansoeters]

When opening and closing the mega wrap from Nav 2 on desktop, the top left and right borders briefly flash. I believe I fixed it by giving .nav_dropdown_mega_wrap overflow none and radius var(--nav--radius). Anyway, great navbars! 😁

[@JuicyDisorder]

Amazing video as always, Tim! I can already hear your keyboard on fire while updating the new Lumos version to include those shiny new Webflow Component Style Variants and Variable Types. I’m seriously hyped to see the kind of magic you’ll create with these updates-it’s going to be absolutely insane and, no doubt, another game-changer! 🚀🔥

[@timothyricks]

Thanks so much! I already added the new variable types in 🙂

[@bamoj]

King Timothy of the House Tricks the 1st of His Name, King of the Andals, Lord of the Lumos and Protector of the Floww. 👑 Thanks for this massivee resource Tim!

[@pedromrr7]

We cant thank you enough!

[@builtbydima]

Wow, this is unbelievable! Are you building an entire library? This is great and super useful!

[@timothyricks]

Thank you! I'm working on a smaller library of some core components.

[@lyuhakusho]

Would you be able to do a video where you take this component from start to finish in the project with style and design changes? I get a bit confused with the is-desktop part - if that should be added to every single element within the nav links? Including the buttons, search elements, etc.

[@macenziweb]

Thank you Tim ♥

[@enzweikoo]

GREAT you're awesome Mr TRICKS

[@aronleniger]

Thank you so so much ❤

[@the-secrettutorials]

Wow thanks!

[@leonstoel9028]

That's so great and powerful! One thing than maybe? could be adjusted: There is css that will make the page not scrollable as long as the mega dropdowns are open. What happens on most browser is that the layout shifts a little to the right, because the scrollbar disappears. After closing the Page shifts back left a little. Is there a way to leave the space on the right reserved for the scrollbar, while still maintaining the functionality?

[@jordan.g]

Amazing 🤩

[@kpcpck8769]

gold, thanks a lot😄

[@mapfei]

As always: absolutely brilliant, Timothy! Are these components also compatible with the Relume components?

[@timothyricks]

Thank you! You might need to replace some sizes and colors in the component to work with Relume styles, but it should be possible. By default, these components are built to work with Lumos.

[@AdrianGavrilă-v5l]

thank you!!!!!

[@alexanderdonev6556]

I'm trying to use this nav, but for some reason when I hover over the dropdown nav items, it resets the position of a sticky element while hovering, and then the item resumes being sticky when not hovering. Any ideas?

[@itsizzy0420]

When I switch the logo to my own svg file, it keeps on showing in black color only. How do I fix this?

[@steveworrell]

Firstly, thank you Timothy. Sorry if I am being an idiot. When I paste the nav into my webflow project, it looks nothing like what we see in the video here. It is transparent and none of the parts are arranged correctly. Any ideas?

[@t_ack6556]

If I’m already using another styleguide system like Relume or Untitled, what’s the best way to use something one off like this?

[@chrisrosch4731]

hey Timothy, love what you are doing! One question, which software or tool do you use to record these short product shot mp4s or gifs where you can see you mouse bigger? Hope you know what i mean lol

[@timothyricks]

Thank you! I use Screen.Studio to make those videos. screen.studio/

[@josereis5556]

I copied the navbar, but none of the spacing variables are defined, so there aren’t any spacings. Is it supposed to be like this, or are we expected to define them ourselves? For example, variables like var(--nav--hamburger-gap), var(--space--4), var(--space--2), etc.? Or am i using an already old version of the styleguide

[@dragan516]

Tim, watching your videos is like watching Messi's games in 2012. In these 8 minutes, you explain more than someone does in a 5-hour course. By the way, one question: on the Nav 1 and Nav 3 Lumos components, the small dropdown for services and language shows a scrollbar for a second when opening. On Windows, it’s that thick scrollbar, and it looks a bit ugly. It only lasts for a second while it’s opening, and this doesn’t happen on the Nav 2 component, but I can’t spot what’s different.

[@timothyricks]

Thanks so much for the heads up! This is fixed now. I needed to wrap the scrollable div in a parent div. Apparently, it can't be a direct child of the animating height element.

[@skylartkitchen]

What is your method for making sure the .is-desktop class doesn't get accidentally deleted when clearing unused styles? Adding it to the styleguide?

[@timothyricks]

Hi Skylar! Yes, before moving the classes into component fields, we can save an unlinked version on the style guide page. This is just a temporary workaround until we get component variants.

[@skylartkitchen]

@@timothyricks Thank you!

[@johanvanwambeke723]

Variable components are out

[@DanielDesigners]

Thank you Timohty! What made you use Webflow's native Navbar element?

[@timothyricks]

The native navbar already handles aria attributes for accessibility and some built in features like clicking outside of the menu or on an anchor link to close the menu. So by using it, I didn't have to include custom JavaScript for those things. A custom JS nav or dropdown also wouldn't open inside Webflow preview. I created all of the animations with CSS only so that they run in preview, improve performance, and are easy to override with different states and media queries when needed.

[@sachinRao15]

Hey Tim great job again dmed you linkedin we can help take these ideas to even next level and give better experience to the community together ☮️

[@dereksoup]

Niceeeeeeeeeeeeeeeeee