Webflow sync, pageviews & more.
NEW

How can I create a navigation with a sub-menu option in Webflow's navbar component?

TL;DR
  • Drag the Navbar and Dropdown elements onto the canvas, placing the Dropdown inside the Nav Menu.
  • Customize dropdown links, style the Dropdown List, optionally enable "open on hover," and preview on all breakpoints for responsiveness.

To create a navigation bar with a drop-down sub-menu using Webflow's navbar component, you’ll use a few built-in elements and interaction settings.

1. Add the Navbar Component

  • Drag the Navbar element from the Add panel (press A) onto your canvas.
  • Webflow adds a structure with a Container, Brand, Nav Menu, and Nav Links by default.

2. Add a Drop-Down Menu

  • Inside the Nav Menu, drag a Dropdown element from the Add panel.
  • This will create a Dropdown Toggle and a Dropdown List containing a few Dropdown Links.
  • Replace the sample Dropdown Links with actual navigation items you want in your sub-menu.
  • You can delete or duplicate Dropdown Links based on how many sub-menu items you need.

4. Style the Sub-Menu

  • Select the Dropdown List and style it (background, shadow, padding) as needed.
  • Set its position to absolute if you need exact placement under your dropdown button.
  • Ensure the Z-index is higher than other elements so it stacks on top.

5. Adjust Hover or Click Behavior (Optional)

  • By default, Webflow uses click to open the Dropdown.
  • To switch to hover:
  • Select the Dropdown, go to the Element Settings panel (gear icon).
  • Check the "Open on Hover" option.

6. Preview and Test

  • Hit Preview mode to see how the dropdown behaves.
  • Make sure it works across breakpoints — adjust layout and spacing for tablet and mobile if needed.

Summary

To create a sub-menu in Webflow’s navbar, add a Dropdown inside the Nav Menu, customize its link items, and style the dropdown list. Use the open on hover setting if desired, and always preview your design for responsiveness.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Is Webflow blocking the proxied requests when using a reverse proxy in front of it?
How can I adjust the tablet breakpoint in Webflow to display the nav menu (hamburger menu) at an earlier pixel width, such as 1150px instead of the default 992px? Is there any custom code or integration that can help me achieve this?
Where can I find information about changes to the Webflow API endpoints, specifically regarding the recent change in the endpoint to update products?
How can I center button text both horizontally and vertically in Webflow without using flexbox?
How can I unlink elements in a Webflow collection to have different formats for each item's page?
How do I resolve the issue of custom code not taking effect when added to the header or footer of my Webflow site?
Can I block scrolling on a Webflow page when the left menu is open? How can I achieve this?
How can I change background colors for an image interaction and a card wrapper in Webflow?
How can I add an image (icon) to a default button in Webflow?
How can I make the pagination in Swiper.js work in my Webflow project? I have tried both the progress bar pagination and the bullet style pagination, but neither of them is functioning. Can someone please help me identify where I went wrong?
How do I control the wrapping of child elements in a grid in Webflow?
Can Webflow be used to redo a 200-page ecommerce site, even if most sites built with Webflow are smaller and lack template features?
Can I disable email submission for a form on Webflow? I have multiple forms on my site and want to prevent one specific form from sending emails, as it is a zip code submission that redirects to an external booking page.
Where can you adjust the speed of smooth scrolling in Webflow?
Has anyone successfully implemented form validation in Webflow where an input must equal a specific value, displaying a success message if it matches and an error message if it doesn't?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I pull the stored email from the first form submitted on our website and input it into a field on a later form during the sign-up process in Webflow? I have tried using the provided script but it only displays "undefined" in the field. I don't have much knowledge of JavaScript and found this script online.
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
When will Webflow update the "Select Field" component to allow for a placeholder with different colors before and after selection, without the need for a label above the field?