How can I create a navigation with a sub-menu option in Webflow's navbar component?
TL;DR
- Drag the Navbar component onto the canvas and add a Dropdown inside the Nav Menu where you want a sub-menu.
- Customize the Dropdown Toggle (e.g., label as “Services”) and populate the Dropdown List with links, then style accordingly.
- Use Webflow’s default click interactions or add custom hover interactions via the Interactions Panel.
- Adjust styling and layout for responsiveness across breakpoints.
To create a navigation with a sub-menu in Webflow using the navbar component, you’ll need to manually build the structure within a dropdown element or using custom interactions.
1. Add the Navbar Component
- Drag the Navbar from the Add panel (A) onto your canvas.
- This adds a default structure: Brand, Nav Menu, and Nav Links.
2. Add a Dropdown Element
- Within the Nav Menu, drag a Dropdown component where you want the sub-menu (e.g., under “Services”).
- The Dropdown contains a Dropdown Toggle (like a nav link) and a Dropdown List (which is the sub-menu container).
3. Customize the Dropdown Toggle
- Select the Dropdown Toggle, rename it appropriately (e.g., “Services”).
- Style it to match your nav links using text, padding, hover state, etc.
4. Add Links to the Sub-menu
- Open the Dropdown List and drag in Link Blocks or Text Links.
- Set each one to the appropriate page or section.
- Style these links to look like a proper sub-menu (stacked, dropdown-style, etc.).
5. Style and Control the Dropdown Behavior
- Webflow handles the open/close interaction automatically when clicking the Dropdown Toggle.
- For more control (e.g., open on hover), apply custom interactions under the Interactions Panel using the Mouse Hover trigger.
6. Make the Menu Responsive
- In Tablet/Mobile views, Webflow collapses the menu into a hamburger.
- The Dropdown still works, but you may need to adjust spacing or orientation in smaller viewports (e.g., make sub-menu vertically stacked).
Summary
To create a sub-menu in your Webflow navbar, use the Dropdown component inside the Nav Menu, then populate and style it like a regular drop-down. Webflow provides basic interaction by default, with the option to enhance it using custom interactions.