create a dropdown in svelte with tailwind css

In this section we will create dropdown in svelte with tailwind css. We will see svelte with typescript dropdown svelte with Tailwind CSS.

Install Tailwind CSS in Svelte with Typescript Using Vite


Tool Use

Tailwind CSS 3.x

Svelte


Examples

svelte with tailwind css simple dropdown.

<script>
  let isOpen = false;
  let items = ["Item 1", "Item 2", "Item 3"];
</script>

<div class="relative">
  <button
    class="px-6 py-2 mt-4 text-white bg-blue-500 rounded"
    on:click={() => (isOpen = !isOpen)}
  >
    Dropdown
  </button>

  {#if isOpen}
    <div
      class="absolute left-0 w-48 py-2 mt-2 mr-10 bg-white rounded-lg shadow-xl"
    >
      {#each items as item (item)}
        <a
          href="#"
          class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white"
        >
          {item}
        </a>
      {/each}
    </div>
  {/if}
</div>
svelte with tailwind css dropdown

svelte with tailwind css dropdown


svelte with tailwind css dropdown using typescript.

<script lang="ts">
  let isOpen: boolean = false;
  let items: string[] = ['Item 1', 'Item 2', 'Item 3'];
</script>

<div class="relative">
  <button class="px-6 py-2 mt-4 text-white bg-blue-500 rounded" on:click={() => isOpen = !isOpen}>
     Dropdown
  </button>

  {#if isOpen}
    <div class="absolute left-0 w-48 py-2 mt-2 mr-10 bg-white rounded-lg shadow-xl">
      {#each items as item (item)}
        <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-indigo-500 hover:text-white">
          {item}
        </a>
      {/each}
    </div>
  {/if}
</div>


svelte with tailwind css header dropdown.

<script>
  let isOpen = false;
  let items = ['Option 1', 'Option 2', 'Option 3'];
</script>

<div class="relative">
  <button class="px-6 py-2 mt-4 text-white bg-red-500 rounded" on:click={() => isOpen = !isOpen}>
    Open Dropdown
  </button>

  {#if isOpen}
    <div class="absolute left-0 w-48 mt-2 rounded-md shadow-lg">
      <div class="bg-white rounded-md shadow-xs">
        <div class="py-1">
          <div class="block px-4 py-2 text-xs font-bold text-gray-700">Options</div>
          {#each items as item (item)}
            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100 hover:text-black">
              {item}
            </a>
          {/each}
        </div>
      </div>
    </div>
  {/if}
</div>
svelte with tailwind css header dropdown

svelte with tailwind css header dropdown

svelte with tailwind css dropdown divider with logout.

<script>
  let isOpen = false;
  let items1 = ['Profile', 'Settings'];
  let items2 = ['Logout'];
</script>

<div class="relative">
  <button class="px-6 py-2 mt-4 text-white bg-green-500 rounded" on:click={() => isOpen = !isOpen}>
    Open Dropdown
  </button>

  {#if isOpen}
    <div class="absolute left-0 w-48 mt-2 rounded-md shadow-lg">
      <div class="bg-white rounded-md shadow-xs">
        <div class="py-1">
          {#each items1 as item (item)}
            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100 hover:text-black">
              {item}
            </a>
          {/each}
        </div>
        <div class="border-t border-gray-100"></div>
        <div class="py-1">
          {#each items2 as item (item)}
            <a href="#" class="block px-4 py-2 text-gray-800 hover:bg-gray-100 hover:text-black">
              {item}
            </a>
          {/each}
        </div>
      </div>
    </div>
  {/if}
</div>
svelte with tailwind css dropdown divider

svelte with tailwind css dropdown divider