Skip to main content




Import the function into the JavaScript file of your project

import { Dropdown } from "@overdog/fn"

Create and initialize an instance

new Dropdown(".filter-dropdown", {
   closeClickingOutside: true

Add the Tailwind variants to the plugins section of your config file.

If you are using multiple elements from Overdog FN that require the same variants, you only need to add them once. You can also modify the data attributes added to each function using the attributes parameter {}.

module.exports = {
   // ...
   plugins: [
      plugin(function ({ addVariant }) {
         addVariant("is-open", "&[data-fn-is-open]")
         addVariant("parent-is-open", "[data-fn-is-open] &")

Twig template Code

<div class="filter-dropdown max-w-[500px] relative"> {# the class filter-dropdown is only use for targeting with your JS instance #}
      class="flex items-center border-b border-[#a5adb9] h-[50px] justify-between text-left w-full"
      <span>Open me</span>
      {# caret #}
      <span class="
         border-b-0 border-x-transparent border-x-[0.3em] border-t-[0.3em] border-t-slate-600
         transition-all ease-linear duration-200
      id="my-dropdown-id" {# only for aria-controls - not used by JS #}
      class="absolute hidden left-0 p-4 bg-white rounded-b-md shadow-md overflow-hidden w-full z-10
      <p>Hey wassup! Add a form here with checkbox, radio, etc. See an example in the Multiple dropdown filters or Single choice filter sections.</p>