Webflow Custom Dropdowns: Beyond Default Select Elements

Open the Add Elements panel (A) → Structure → Div Block and add it to the canvas. Give it a class name like 'dropdown-wrapper'. This wrapper is the positioning anchor — it will be the parent for both the trigger and the floating list. Inside 'dropdown-wrapper', add two child Div Blocks: one with class 'dropdown-trigger' (the visible button the user clicks) and one with class 'dropdown-list' (the panel that appears on click). In the Navigator (Z), confirm the hierarchy is: dropdown-wrapper → dropdown-trigger + dropdown-list. This parent-child relationship is essential for absolute positioning to work correctly.

Select 'dropdown-trigger' → Style Panel (S) → Layout → Display: Flex → Justify: Space Between → Align: Center. Set a fixed Width and Height (e.g., 200px × 44px) or let it size to content with padding. Add Backgrounds → solid color. Add Borders → 1px solid border. Add Border Radius (4-8px for a slight curve). Inside 'dropdown-trigger', add a Text element (Add Elements A → Basic → Text) for the label (e.g., 'Select option') and an SVG or Unicode chevron character for the arrow indicator. Style Panel → Effects → Transitions → '+' → Transform → 300ms → Ease — this will animate the chevron rotation when the dropdown opens.

Select the 'dropdown-wrapper' container → Style Panel (S) → Position → Relative. This creates the positioning context for the absolute child. Now select 'dropdown-list' → Style Panel → Position → Absolute. Set Top: 100% (places the list directly below the trigger), Left: 0, Width: 100% (matches the trigger width) or a custom pixel width (e.g., 240px). Set Z-index: 100 to ensure the dropdown appears above other page content. Add a Background color, Border, Border Radius, and Box Shadow (Effects → Box Shadows: X:0, Y:4px, Blur:16px, Color: rgba(0,0,0,0.12)) to give the panel a floating card appearance.

Inside 'dropdown-list', add individual option items. Each option should be a Div Block with class 'dropdown-item'. Inside each 'dropdown-item', add a Text element with the option label. Style each 'dropdown-item': Style Panel → Layout → Display: Flex → Align: Center. Set Padding: 10px 16px. Add a Hover state: Selector States → Hover → Backgrounds → lighter brand color. For a link-type dropdown (like a navigation-style menu), use Link Block (Add Elements A → Basic → Link) instead of Div Block for each option and assign destinations in Element Settings (D).

The dropdown list must be hidden by default. Select 'dropdown-list' → Style Panel (S) → Effects → Opacity: 0 (this will be animated during open). Also go to Style Panel → Layout → Display → None — this removes it from layout flow completely when hidden. IMPORTANT: Do not only set Display: None — Webflow's Interactions cannot transition from Display: None to visible with a smooth animation. Instead, set Display: None as a starting state in the Interaction (not the Style Panel). For the Style Panel, keep Display: Block but Opacity: 0 and Style Panel → Position → set Visibility to 'hidden' via Custom Properties if needed, OR handle the initial state purely through the Interaction's 'Set Initial Appearance' step.

Select the 'dropdown-trigger' element. Open the Interactions panel (H) → Element triggers → '+' → Mouse Click (Tap). Webflow creates two animation slots: 1st Click and 2nd Click — this is the built-in toggle mechanism. For 1st Click (open): click '+' → Start Animation → name it 'Dropdown Open'. Add 'dropdown-list' as the target (use 'Affect Different Element' → select class 'dropdown-list'). Set: Opacity from 0 to 1 (0.25s, Ease Out) + Transform Move Y from -8px to 0px (0.25s, Ease Out). For 2nd Click (close): click '+' → Start Animation → name it 'Dropdown Close'. Target 'dropdown-list' again. Set: Opacity from 1 to 0 (0.2s, Ease In) + Move Y from 0 to -8px. Also rotate the chevron icon in each animation: 1st click rotates 180°, 2nd click rotates back to 0°.

Webflow's Interactions cannot detect clicks outside an element natively. For production-quality dropdowns, add a small JavaScript snippet to close the dropdown when the user clicks anywhere else on the page. Add an HTML Embed element to the page (Add Elements A → Basic → HTML Embed) or add the script to Page Settings → Before </body> Code. The script listens for document clicks and closes the dropdown if the click target is outside the dropdown wrapper. Requires a paid plan (Basic or above) for custom code to work on the published site.

1<!-- Add to Page Settings → Before </body> Code -->
2<script>
3// Close custom dropdown when clicking outside it
4document.addEventListener('click', function(event) {
5  // Select all dropdown wrappers on the page
6  var dropdowns = document.querySelectorAll('[data-dropdown]');
7
8  dropdowns.forEach(function(dropdown) {
9    var list = dropdown.querySelector('.dropdown-list');
10    var trigger = dropdown.querySelector('.dropdown-trigger');
11
12    if (!dropdown.contains(event.target)) {
13      // Click was outside — close the dropdown
14      if (list) {
15        list.style.opacity = '0';
16        list.style.pointerEvents = 'none';
17        list.style.transform = 'translateY(-8px)';
18      }
19      // Reset the open state in Webflow's interaction system
20      // This ensures the 1st/2nd click counter resets
21      if (trigger && trigger.getAttribute('data-open') === 'true') {
22        trigger.click(); // Trigger a simulated 2nd click to reset
23        trigger.setAttribute('data-open', 'false');
24      }
25    } else if (trigger && trigger.contains(event.target)) {
26      var isOpen = trigger.getAttribute('data-open') === 'true';
27      trigger.setAttribute('data-open', !isOpen ? 'true' : 'false');
28    }
29  });
30});
31</script>