Components Dropdown

html

typescript

<button
  flowbiteButton
  [ngpMenuTrigger]="dropdownMenu"
  class="data-open:*:[flowbite-icon]:rotate-180">
  Dropdown button
  <flowbite-icon
    name="chevronDown"
    class="ml-2 size-4 stroke-2 transition-transform duration-150 ease-in-out" />
</button>

<ng-template #dropdownMenu>
  <div flowbiteDropdown>
    <ul flowbiteDropdownContent>
      <li flowbiteDropdownItem>Dashboard</li>
      <li flowbiteDropdownItem>Settings</li>
      <li flowbiteDropdownItem>Earnings</li>
      <li flowbiteDropdownItem>Sign out</li>
    </ul>
  </div>
</ng-template>

Themes

{
  "host": {
    "base": "py-2 text-sm",
    "transition": "",
    "color": {
      "default": {
        "light": "text-gray-700",
        "dark": "dark:text-gray-200"
      },
      "info": {
        "light": "text-gray-700",
        "dark": "dark:text-gray-200"
      },
      "failure": {
        "light": "text-gray-700",
        "dark": "dark:text-gray-200"
      },
      "success": {
        "light": "text-gray-700",
        "dark": "dark:text-gray-200"
      },
      "warning": {
        "light": "text-gray-700",
        "dark": "dark:text-gray-200"
      },
      "primary": {
        "light": "text-gray-700",
        "dark": "dark:text-gray-200"
      }
    }
  }
}

{
  "host": {
    "base": "flex cursor-pointer items-center justify-between px-4 py-2 font-medium",
    "transition": "",
    "color": {
      "default": {
        "light": "data-hover:bg-gray-100",
        "dark": "dark:data-hover:bg-gray-700 dark:data-hover:text-white"
      },
      "info": {
        "light": "data-hover:bg-blue-100",
        "dark": "dark:data-hover:bg-blue-700 dark:data-hover:text-white"
      },
      "failure": {
        "light": "data-hover:bg-red-100",
        "dark": "dark:data-hover:bg-red-700 dark:data-hover:text-white"
      },
      "success": {
        "light": "data-hover:bg-green-100",
        "dark": "dark:data-hover:bg-green-700 dark:data-hover:text-white"
      },
      "warning": {
        "light": "data-hover:bg-yellow-100",
        "dark": "dark:data-hover:bg-yellow-700 dark:data-hover:text-white"
      },
      "primary": {
        "light": "data-hover:bg-primary-100",
        "dark": "dark:data-hover:bg-primary-700 dark:data-hover:text-white"
      }
    }
  }
}

{
  "host": {
    "base": "fixed z-10 w-max divide-y rounded-lg border shadow-sm",
    "transition": "",
    "color": {
      "default": {
        "light": "divide-gray-200 border-gray-200 bg-white",
        "dark": "dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800"
      },
      "info": {
        "light": "divide-blue-200 border-blue-200 bg-white",
        "dark": "dark:divide-blue-700 dark:border-blue-700 dark:bg-gray-800"
      },
      "failure": {
        "light": "divide-red-200 border-red-200 bg-white",
        "dark": "dark:divide-red-700 dark:border-red-700 dark:bg-gray-800"
      },
      "success": {
        "light": "divide-green-200 border-green-200 bg-white",
        "dark": "dark:divide-green-700 dark:border-green-700 dark:bg-gray-800"
      },
      "warning": {
        "light": "divide-yellow-200 border-yellow-200 bg-white",
        "dark": "dark:divide-yellow-700 dark:border-yellow-700 dark:bg-gray-800"
      },
      "primary": {
        "light": "divide-primary-200 border-primary-200 bg-white",
        "dark": "dark:divide-primary-700 dark:border-primary-700 dark:bg-gray-800"
      }
    }
  }
}

Default dropdown

Themes

Dropdown content

Dropdown item

Dropdown