Dropdowns - Done

The "normal" dropdown is a select replacement.

Dependencies

Requires dropdowns.js

Notes

ONLY APPLIES to Dropdowns with .dropdown class: If i have provided code in the past with BOTH .dropdown and webflow classes (w-dropdown, w-dropdown-toggle, w-dropdown-list, the webflow classes should be removed. We should only be depending on dropdown.js for normal dropdowns.)

How it Works

The dropdown operates in four main phases:

Initialization
- DOM Ready: When the DOM is fully loaded, the script selects all elements with the .dropdown class.
- Storing Original Placeholder: For each dropdown, the original text in the .dropdown-text element is saved to a custom data attribute (data-original-placeholder) for later use.
- Preselection Check: The script looks for an option with data-dropdown-selected="true".
  - If found, it updates the dropdown’s data-value and displays the corresponding option text, while marking the option’s icon as selected.
  - If not found (and if data-value is empty), it applies the dropdown-placeholder class to .dropdown-text.
- Closing on Load: Each dropdown is explicitly closed, ensuring the .dropdown-open container is hidden.
Toggling the Dropdown
- Click on Closed Section: Clicking the .dropdown-closed element toggles the dropdown’s open/closed state.
- Single Open Dropdown: If another dropdown is open, it is closed before the clicked dropdown is toggled.
- Displaying Options: Opening the dropdown sets the .dropdown-open container to display (e.g., display: block).
Option Selection
- Click on an Option: When a .dropdown-option is clicked, the script:
  - Prevents the default action and stops the event from propagating.
- Clear Selection Option: If the clicked option has the data-dropdown-clear-selection attribute:
  - Clears any existing selections in the dropdown.
  - Resets data-value to an empty string.
  - Restores the original placeholder text from data-original-placeholder and applies the dropdown-placeholder class.
- Normal Option Selection: Otherwise, for a regular option:
  - All other options have their selection state cleared (removing data-dropdown-selected and the .selected class from icons).
  - The clicked option is marked as selected by setting data-dropdown-selected="true" and adding the .selected class to its icon.
  - The dropdown’s data-value is updated with the option’s value.
  - The visible text in .dropdown-text is updated to show the selected option, and the dropdown-placeholder class is removed.
- Closing After Selection: After updating the selection, the dropdown is closed by hiding the .dropdown-open container.
Click-Away Handling
- Global Listener: A document-level click listener ensures that if the user clicks anywhere outside an open dropdown, any open dropdown will be closed automatically.

This design ensures a self-contained, reusable dropdown component using only vanilla JavaScript and the custom classes provided.

Requires dropdown-filter.js

This optional component goes at the top of the dropdown field. It allows the user to enter text to filter the dropdown options. dropdown-filter.js includes required JS for this functionality.

Attributes / Settings

Attribute/Class	Description	Example/Note
class="dropdown"	Main container for the dropdown component.	<div class="dropdown" data-value="">
data-value	Holds the currently selected value.	data-value="option1"
data-original-placeholder	Set on load; stores the original placeholder text for later restoring when clearing the selection.	data-original-placeholder="Select an option"

Attribute/Class	Description	Example/Note
class="dropdown-closed"	Visible part of the dropdown that the user clicks to open or close the dropdown.	<div class="dropdown-closed">

Attribute/Class	Description	Example/Note
.table-filter	Optional class applied to the dropdown’s closed section (.dropdown-closed) to style it for table filter rows or pagination filters.	<div class="dropdown-closed table-filter">

Attribute/Class	Description	Example/Note
class="dropdown-text"	Displays the selected option's text, or a placeholder if no option is selected.	<div class="dropdown-text">Select an option</div>
dropdown-placeholder	CSS class applied to the text element when no option is selected (i.e. when data-value is empty).	Added automatically if no selection is made

Attribute/Class	Description	Example/Note
class="dropdown-open"	Container for the list of options. Hidden by default; shown when the dropdown is open.	<div class="dropdown-open">

Attribute/Class	Description	Example/Note
class="dropdown-option"	Represents an individual selectable option.	<a class="dropdown-option" data-value="option1">…</a>
data-value	Holds the option's value.	data-value="option1"
data-dropdown-selected	Set to "true" when the option is selected; otherwise "false".	data-dropdown-selected="true" (when selected)
data-dropdown-clear-selection	If present, clicking the option clears the selection and restores the original placeholder text.	<a class="dropdown-option" data-dropdown-clear-selection data-value="">Clear</a>

Attribute/Class	Description	Example/Note
class="dropdown-option-text"	Contains the text displayed for the individual option.	<div class="dropdown-option-text">Option 1</div>

Attribute/Class	Description	Example/Note
class="dropdown-option-selected-icon"	Holds the icon that indicates the option's selection state. Receives the .selected class when selected.	<div class="dropdown-option-selected-icon"></div>
.selected	CSS class applied to indicate that this option is selected.	Added dynamically when the option is selected

Attribute/Class	Description	Example/Note
class="dropdown-filter"	Container for the optional dropdown filter element.	<div class="dropdown-filter">...</div>

Attribute/Class	Description	Example/Note
class="dropdown-filter-input"	The input field used to filter the dropdown options.	<input class="dropdown-filter-input" maxlength="256" placeholder="Filter" type="text">
maxlength="256"	Limits the number of characters in the input field.	maxlength="256"
placeholder="Filter"	Text displayed as a hint when the input is empty.	placeholder="Filter"
type="text"	Specifies that the input is of type text.	type="text"

Modifier Class	Description	Example/Note
left	Adjusts the positioning of the open dropdown (.dropdown-open) so that it aligns to the left side of the closed element rather than expanding to the right.	Use as a class on .dropdown-open when you need the dropdown to open leftward (e.g., near the right edge).
top	Positions the dropdown open container above the closed element.	Apply as .dropdown-open.top to have the dropdown open upward.
top-left	Combines top and left positioning, placing the dropdown open container above and aligned to the left of the closed element.	Use as .dropdown-open.top-left for combined upward and leftward alignment.

Default Behavior: By default, .dropdown-open opens downward with left: 0 and top: 0, expanding naturally to the right if its content exceeds the width of the closed element.

Modifier Class	Description	Example/Note
.max-100	Restricts the maximum width of the dropdown open container to a specific size (e.g., 100px). Useful when you want to constrain the width for design consistency.	Apply as an additional class on .dropdown-open (e.g., <div class="dropdown-open max-100">).
.max-250	Restricts the maximum width of the dropdown open container to a larger fixed size (e.g., 250px).	Use as <div class="dropdown-open max-250"> to allow for a wider dropdown with a fixed maximum width.

Default Behavior: By default, .dropdown-open has a minimum width equal to 100% of the closed element’s width and a maximum width of fit-content (i.e., it expands naturally to fit the content). The max-width modifier classes override this default behavior.

Example HTML

<div class="dropdown" data-value="">
  <!-- Closed portion: Always visible -->
  <div class="dropdown-closed">
    <div class="dropdown-arrow">
      <!-- (Optional) SVG or icon for the arrow -->
    </div>
    <div class="dropdown-text">Select an option</div>
  </div>
  <!-- Open portion: Shown when the dropdown is toggled -->
  <div class="dropdown-open" style="display: none;">
    <div class="dropdown-option-container">
      
      <!-- START Optional Dropdown Filter -->
      <div class="dropdown-filter">
      <input class="dropdown-filter-input" maxlength="256" placeholder="Filter" type="text"></div>
      <!-- END Optional Dropdown Filter -->
      
      <!-- START Clear Selection Option Example -->
      <a class="dropdown-option" data-dropdown-clear-selection data-value="">
        <div class="dropdown-option-selected-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
        </div>
        <div class="dropdown-option-text">None</div>
      </a>
      <!--END Clear Selection Option Example -->
    
      <!-- START Regular Option Example -->
      <a class="dropdown-option" data-value="option1">
        <div class="dropdown-option-selected-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
        </div>
        <div class="dropdown-option-text">Option 1</div>
      </a>
      <!-- END Regular Option Example -->

      <!-- START Pre-selected Option Example -->
      <a class="dropdown-option" data-value="option1" data-dropdown-selected="true">
        <div class="dropdown-option-selected-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check"><polyline points="20 6 9 17 4 12"></polyline></svg>
        </div>
        <div class="dropdown-option-text">Option 1</div>
      </a>
      <!-- END Pre-selected Option Example -->

    </div>
  </div>
</div>

Workspace Picker

Workspace picker uses Webflow's dropdown function (webflow.js)

Table Action Menu uses Webflow's dropdown function (webflow.js)

Dropdowns - Done

Normal Dropdown (Forms)

Dependencies

Notes

How it Works

Dropdown Filter (optional)

Attributes / Settings

Dropdown Container (<div class="dropdown">)

Dropdown Closed Section (<div class="dropdown-closed">)

Dropdown Closed Table Styling (<div class="dropdown-closed table-filter">)

Dropdown Text (<div class="dropdown-text">)

Dropdown Open Section (<div class="dropdown-open">)

Dropdown Option (<a class="dropdown-option">)

Dropdown Option Text (<div class="dropdown-option-text">)

Dropdown Option Selected Icon (<div class="dropdown-option-selected-icon">)

Dropdown Filter (Optional)

Dropdown Filter Input

Dropdown Open Direction Modifiers

Dropdown Open Max-Width Modifiers

Example HTML

Workspace Picker

Table Action Menu