Webflow Elements

Dropdown

Overview
Layout Elements
Layout Elements Overview
100
Section
101
Container
102
Grid
103
Columns
104
Basic Elements
Basic Elements Overview
200
Typography Elements
Typography Elements Overview
300
Text Block
301
Paragraph
302
Rich Text
306
Block Quote
306
Typography Elements
CMS Elements Overview
400
Users Elements
Users Elements Overview
500
Media Elements
Media Elements Overview
600
Background Video
601
Forms Elements
Forms Elements Overview
700
Advanced & Navigation Elements
Advanced Elements Overview
800
Code Block
801
Navigation Elements
Dropdown
803
Third-Party Elements
Third-Party Elements Overview
850
Table of Contents
851
Other Custom Elements
Accordion
901
Breadcrumbs
902
No items found.
Published
July 6, 2023
Updated
in lightbox

The dropdown is commonly used within the Navbar to form submenus.

Word-wrapping

One common problem here is that the sub-menu items with longer titles push the menu width too far.

Typically you can select the Dropdown Link element directly, and manually set the Breaking behavior to Normal under More type options. Even if it indicates default, it's likely inheriting from the parent, and therefore showing a no-break behavior.

If that does not work, here's an old-school technique involving custom CSS that adjusts whitespace handling within these elements.

You'll need to target it correctly to the elements you wish to impact;

Dropdown Menu Gap Problems

Is your dropdown menu closing when you try to click it? Here's why, and how to fix this layout issue.

Auto-Opening Dropdowns

https://www.youtube.com/watch?v=HvLqXnSjoSA&t=3s&ab_channel=FrancescoCastronuovo

https://github.com/francesco-castronuovo/opened-dropdown/blob/main/main.js

Programming

To programmatically open or close the dropdown, the click event won't work. Use mousedown and then mouseup instead, on the toggle;

https://discourse.webflow.com/t/how-to-get-dropdown-open-on-page-load-automatically/158399/14

Videos
No items found.
Table of Contents
Comments
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.