Qwik dropdown - Flowbite

Use the dropdown component to trigger a list of menu items when clicking on an element such as a button or link based on multiple styles, sizes, and placements with Qwik

The dropdown component is a UI element built with Qwik that displays a list of items when a trigger element (e.g., a button) is clicked. You can use it to build dropdown menus, lists, and more.

The default styles are built using utility classes from Tailwind CSS. You can customize the behavior and positioning of the dropdowns using custom props from Qwik.

To start using the component make sure that you have imported it from flowbite-qwik :

import { Dropdown } from "flowbite-qwik"

Default Dropdown

Use this example to create a simple dropdown with a list of menu items by adding child <Dropdown.Item> components inside the main <Dropdown> component.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Dropdown } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Dropdown label="Dropdown button">
      <Dropdown.Item>Dashboard</Dropdown.Item>
      <Dropdown.Item>Settings</Dropdown.Item>
      <Dropdown.Item>Earnings</Dropdown.Item>
      <Dropdown.Item>Sign out</Dropdown.Item>
    </Dropdown>
  )
})

Dropdown divider

Use the option 'divider' to <Dropdown.Item> component to add a divider between the dropdown items.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Dropdown } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Dropdown label="Dropdown button">
      <Dropdown.Item>Dashboard</Dropdown.Item>
      <Dropdown.Item>Settings</Dropdown.Item>
      <Dropdown.Item divider />
      <Dropdown.Item>Separated link</Dropdown.Item>
    </Dropdown>
  )
})

Dropdown header

Use the option 'header' to <Dropdown.Item> component to add a header to the dropdown. You can use this to add a user profile image and name, for example.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Dropdown } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Dropdown label="Dropdown button">
      <Dropdown.Item header>
        <span class="block text-sm">Bonnie Green</span>
        <span class="block truncate text-sm font-medium">bonnie@flowbite.com</span>
      </Dropdown.Item>
      <Dropdown.Item>Dashboard</Dropdown.Item>
      <Dropdown.Item>Settings</Dropdown.Item>
      <Dropdown.Item divider />
      <Dropdown.Item>Sign out</Dropdown.Item>
    </Dropdown>
  )
})

Dropdown items with icon

Add custom icons next to the menu items by using the icon prop on the <Dropdown.Item> component.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Dropdown } from 'flowbite-qwik'
import { IconHomeOutline, IconSearchSolid, IconTextSizeOutline } from 'flowbite-qwik-icons'

export default component$(() => {
  return (
    <Dropdown label="Dropdown button">
      <Dropdown.Item header>
        <span class="block text-sm">Bonnie Green</span>
        <span class="block truncate text-sm font-medium">bonnie@flowbite.com</span>
      </Dropdown.Item>
      <Dropdown.Item icon={IconHomeOutline}>Dashboard</Dropdown.Item>
      <Dropdown.Item icon={IconSearchSolid}>Settings</Dropdown.Item>
      <Dropdown.Item divider />
      <Dropdown.Item icon={IconTextSizeOutline}>Sign out</Dropdown.Item>
    </Dropdown>
  )
})

Inline dropdown

Use the inline prop to make the dropdown appear inline with the trigger element.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Dropdown } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Dropdown label="Dropdown button" inline>
      <Dropdown.Item>Dashboard</Dropdown.Item>
      <Dropdown.Item>Settings</Dropdown.Item>
      <Dropdown.Item divider />
      <Dropdown.Item>Separated link</Dropdown.Item>
    </Dropdown>
  )
})

User avatar

You can use the `as` prop to set the trigger element to an image.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Dropdown } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="flex gap-5">
      <Dropdown
        as={
          <img
            class="h-8 w-8 rounded-full"
            src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"
            alt="user photo"
          />
        }
      >
        <Dropdown.Item header>
          <span class="block text-sm">Bonnie Green</span>
          <span class="block truncate text-sm font-medium">bonnie@flowbite.com</span>
        </Dropdown.Item>
        <Dropdown.Item>Dashboard</Dropdown.Item>
        <Dropdown.Item>Settings</Dropdown.Item>
        <Dropdown.Item divider />
        <Dropdown.Item>Sign out</Dropdown.Item>
      </Dropdown>

      <Dropdown
        as={
          <img
            class="h-8 w-8 rounded-full"
            src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"
            alt="user photo"
          />
        }
      >
        <Dropdown.Item header>
          <span class="block text-sm">Bonnie Green</span>
          <span class="block truncate text-sm font-medium">bonnie@flowbite.com</span>
        </Dropdown.Item>
        <Dropdown.Item>Dashboard</Dropdown.Item>
        <Dropdown.Item>Settings</Dropdown.Item>
        <Dropdown.Item divider />
        <Dropdown.Item>Sign out</Dropdown.Item>
      </Dropdown>

      <Dropdown
        as={
          <img
            class="h-8 w-8 rounded-full"
            src="https://res.cloudinary.com/dkht4mwqi/image/upload/f_auto,q_auto/v1718462568/flowbite-qwik/jpnykkz8ojq7ojgg4qta.jpg"
            alt="user photo"
          />
        }
      >
        <Dropdown.Item header>
          <span class="block text-sm">Bonnie Green</span>
          <span class="block truncate text-sm font-medium">bonnie@flowbite.com</span>
        </Dropdown.Item>
        <Dropdown.Item>Dashboard</Dropdown.Item>
        <Dropdown.Item>Settings</Dropdown.Item>
        <Dropdown.Item divider />
        <Dropdown.Item>Sign out</Dropdown.Item>
      </Dropdown>
    </div>
  )
})

Dropdown sizes

The dropdown menus work with buttons of all sizes including smaller or larger ones.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Dropdown, DropdownSize } from 'flowbite-qwik'

export default component$(() => {
  return (
    <>
      <div class="flex gap-5">
        {(['s', 'm', 'l'] as DropdownSize[]).map((size) => (
          <Dropdown label="Dropdown button" size={size}>
            <Dropdown.Item>Dashboard</Dropdown.Item>
            <Dropdown.Item>Settings</Dropdown.Item>
          </Dropdown>
        ))}
      </div>
      <div class="mt-4 flex gap-5">
        {(['s', 'm', 'l'] as DropdownSize[]).map((size) => (
          <Dropdown label="Dropdown button" size={size} inline>
            <Dropdown.Item>Dashboard</Dropdown.Item>
            <Dropdown.Item>Settings</Dropdown.Item>
          </Dropdown>
        ))}
      </div>
    </>
  )
})

Dropdown click event handler

Add a custom onClick$ event handler to the <Dropdown.Item> component to handle the click event.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Dropdown } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Dropdown label="Dropdown button">
      <Dropdown.Item
        onClick$={() => {
          alert('click dashboard')
        }}
      >
        Dashboard
      </Dropdown.Item>
      <Dropdown.Item
        onClick$={() => {
          alert('click settings')
        }}
      >
        Settings
      </Dropdown.Item>
      <Dropdown.Item
        onClick$={() => {
          alert('click earnings')
        }}
      >
        Earnings
      </Dropdown.Item>
      <Dropdown.Item
        onClick$={() => {
          alert('click sign-out')
        }}
      >
        Sign out
      </Dropdown.Item>
    </Dropdown>
  )
})

Dropdown with checkbox

Add multiple checkbox elements inside your dropdown menu to enable more advanced input interaction.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Dropdown } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Dropdown label="Dropdown checkbox" closeWhenSelect={false}>
      <Dropdown.Item>
        <div class="flex items-center">
          <input
            id="checkbox-item-1"
            type="checkbox"
            value="item-1"
            class="h-4 w-4 rounded-sm border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:ring-offset-gray-700 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-700"
          />
          <label for="checkbox-item-1" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
            Default checkbox
          </label>
        </div>
      </Dropdown.Item>
      <Dropdown.Item>
        <div class="flex items-center">
          <input
            checked
            id="checkbox-item-2"
            type="checkbox"
            value="item-2"
            class="h-4 w-4 rounded-sm border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:ring-offset-gray-700 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-700"
          />
          <label for="checkbox-item-2" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
            Checked state
          </label>
        </div>
      </Dropdown.Item>
      <Dropdown.Item>
        <div class="flex items-center">
          <input
            id="checkbox-item-3"
            type="checkbox"
            value="item-3"
            class="h-4 w-4 rounded-sm border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:ring-offset-gray-700 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-700"
          />
          <label for="checkbox-item-3" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
            Default checkbox
          </label>
        </div>
      </Dropdown.Item>
    </Dropdown>
  )
})

Dropdown with radio

Enable more advanced interaction with your users by adding radio input elements inside the dropdown menu.

Edit on GitHub
tsx
import { component$ } from '@builder.io/qwik'
import { Dropdown } from 'flowbite-qwik'

export default component$(() => {
  return (
    <Dropdown label="Dropdown radio" closeWhenSelect={false}>
      <Dropdown.Item>
        <div class="flex items-center">
          <input
            id="radio-item-1"
            type="radio"
            name="default-radio"
            value="item-1"
            class="h-4 w-4 rounded-sm border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:ring-offset-gray-700 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-700"
          />
          <label for="radio-item-1" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
            Default radio
          </label>
        </div>
      </Dropdown.Item>
      <Dropdown.Item>
        <div class="flex items-center">
          <input
            checked
            id="radio-item-2"
            type="radio"
            name="default-radio"
            value="item-2"
            class="h-4 w-4 rounded-sm border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:ring-offset-gray-700 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-700"
          />
          <label for="radio-item-2" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
            Checked state
          </label>
        </div>
      </Dropdown.Item>
      <Dropdown.Item>
        <div class="flex items-center">
          <input
            id="radio-item-3"
            type="radio"
            name="default-radio"
            value="item-3"
            class="h-4 w-4 rounded-sm border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-500 dark:bg-gray-600 dark:ring-offset-gray-700 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-700"
          />
          <label for="radio-item-3" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">
            Default radio
          </label>
        </div>
      </Dropdown.Item>
    </Dropdown>
  )
})

Dropdown with toggle switch

Show a list of toggle switch elements inside the dropdown menu to enable a yes or no type of choice.

Edit on GitHub
tsx
import { component$, useSignal } from '@builder.io/qwik'
import { Dropdown, Toggle } from 'flowbite-qwik'

export default component$(() => {
  const enableNotifications = useSignal(false)
  const enable2faAuthentication = useSignal(true)
  const subscribeToNewsletter = useSignal(false)

  return (
    <div class="flex gap-4">
      <Dropdown label="Dropdown toggle" closeWhenSelect={false}>
        <Dropdown.Item>
          <Toggle label="Enable notifications" bind:checked={enableNotifications} />
        </Dropdown.Item>
        <Dropdown.Item>
          <Toggle label="Enable 2FA authentication" bind:checked={enable2faAuthentication} />
        </Dropdown.Item>
        <Dropdown.Item>
          <Toggle label="Subscribe to newsletter" bind:checked={subscribeToNewsletter} />
        </Dropdown.Item>
      </Dropdown>

      <Dropdown label="Dropdown toggle" closeWhenSelect={false}>
        <Dropdown.Item>
          <Toggle label="Enable notifications" bind:checked={enableNotifications} />
        </Dropdown.Item>
        <Dropdown.Item>
          <Toggle label="Enable 2FA authentication" bind:checked={enable2faAuthentication} />
        </Dropdown.Item>
        <Dropdown.Item>
          <Toggle label="Subscribe to newsletter" bind:checked={subscribeToNewsletter} />
        </Dropdown.Item>
      </Dropdown>
    </div>
  )
})

Dropdown with search

Use this example if you want to add a search bar inside the dropdown menu to be able to filter through a long list of menu items with scrolling behaviour.

Edit on GitHub
tsx
import { component$, useComputed$, useSignal, useTask$ } from '@builder.io/qwik'
import { Checkbox, Dropdown, Input } from 'flowbite-qwik'

export default component$(() => {
  const checkboxes = [
    {
      label: 'Default checkbox',
      value: 'item-1',
    },
    {
      label: 'Second checkbox',
      value: 'item-2',
    },
    {
      label: 'Third checkbox',
      value: 'item-3',
    },
  ]

  const searchValue = useSignal('')
  const inputRef = useSignal<HTMLInputElement>()
  const filteredCheckboxes = useComputed$(() =>
    checkboxes.filter((checkbox) => checkbox.label.toLowerCase().includes(searchValue.value.toLowerCase())),
  )

  useTask$(({ track }) => {
    track(() => inputRef.value)
    inputRef.value?.focus()
  })

  return (
    <Dropdown label="Dropdown search" closeWhenSelect={false}>
      <Dropdown.Item header>
        <Input ref={inputRef} placeholder="Search..." bind:value={searchValue} />
      </Dropdown.Item>

      {filteredCheckboxes.value.map((checkbox) => (
        <Dropdown.Item key={checkbox.value}>
          <Checkbox value={checkbox.value}>{checkbox.label}</Checkbox>
        </Dropdown.Item>
      ))}
    </Dropdown>
  )
})