diff --git a/source/SIL.AppBuilder.Portal/src/lib/components/Dropdown.svelte b/source/SIL.AppBuilder.Portal/src/lib/components/Dropdown.svelte
index f649f17e8..e8c82fcba 100644
--- a/source/SIL.AppBuilder.Portal/src/lib/components/Dropdown.svelte
+++ b/source/SIL.AppBuilder.Portal/src/lib/components/Dropdown.svelte
@@ -1,33 +1,40 @@
 <!--
 @component
 A simple dropdown menu from DaisyUI.
+
 -->
-<!-- TODO: this component isn't used anywhere... -->
 <script lang="ts">
   interface Props {
-    cols?: number;
-    label?: import('svelte').Snippet;
-    content?: import('svelte').Snippet;
-    onNavEnd?: () => void;
+    /** class="dropdown ..." */
+    dropdownClasses?: string;
+    /** class="btn btn-ghost ..." */
+    labelClasses?: string;
+    /** class="dropdown-content z-10 drop-shadow-lg rounded-md bg-base-200 ..." */
+    contentClasses?: string;
+    label: import('svelte').Snippet;
+    content: import('svelte').Snippet;
+    onclick?: () => void;
+    open?: boolean;
   }
 
-  let { cols = 6, label, content, onNavEnd }: Props = $props();
+  let {
+    dropdownClasses = '',
+    labelClasses = '',
+    contentClasses = '',
+    label,
+    content,
+    onclick,
+    open = $bindable(false)
+  }: Props = $props();
 </script>
 
-<div class="dropdown">
-  <!-- When .dropdown is focused, .dropdown-content is revealed making this actually interactive -->
-  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-  <label tabindex="0" class="btn btn-ghost p-0.5 no-animation flex-nowrap">
-    {@render label?.()}
-    <div
-      role="button"
-      tabindex="0"
-      class="dropdown-content menu drop-shadow-lg mt-2.5 bg-base-100 z-10"
-      class:min-w-[21rem]={cols == 6}
-      class:min-w-[17.25rem]={cols == 5}
-      onblur={() => onNavEnd?.()}
-    >
-      {@render content?.()}
-    </div>
-  </label>
-</div>
+<svelte:window onclick={() => (open = false)} />
+
+<details class="dropdown {dropdownClasses}" bind:open>
+  <summary class="btn btn-ghost {labelClasses}" onclick={() => onclick?.()}>
+    {@render label()}
+  </summary>
+  <div class="dropdown-content z-10 drop-shadow-lg rounded-md bg-base-200 {contentClasses}">
+    {@render content()}
+  </div>
+</details>
diff --git a/source/SIL.AppBuilder.Portal/src/lib/components/LanguageSelector.svelte b/source/SIL.AppBuilder.Portal/src/lib/components/LanguageSelector.svelte
index a22316de3..4f35fd0a8 100644
--- a/source/SIL.AppBuilder.Portal/src/lib/components/LanguageSelector.svelte
+++ b/source/SIL.AppBuilder.Portal/src/lib/components/LanguageSelector.svelte
@@ -5,6 +5,7 @@
   import { LanguageIcon } from '$lib/icons';
   import { languageTag, type AvailableLanguageTag } from '$lib/paraglide/runtime';
   import Icon from '@iconify/svelte';
+  import Dropdown from './Dropdown.svelte';
 
   function switchToLanguage(newLanguage: AvailableLanguageTag) {
     const canonicalPath = i18n.route(page.url.pathname);
@@ -14,20 +15,20 @@
 </script>
 
 {#key languageTag()}
-  <div class="dropdown dropdown-end">
-    <div
-      role="button"
-      class="btn btn-ghost m-2 p-2 rounded-xl items-middle justify-center flex-nowrap"
-      tabindex="0"
-    >
+  <Dropdown
+    dropdownClasses="dropdown-end"
+    labelClasses="m-2 p-2 rounded-xl items-middle justify-center flex-nowrap"
+    contentClasses="overflow-y-auto"
+  >
+    {#snippet label()}
       <LanguageIcon color="white" />
-    </div>
-    <div class="dropdown-content z-10 bg-base-200 w-48 rounded-md overflow-y-auto">
-      <ul class="menu menu-compact gap-1 p-2" tabindex="-1">
+    {/snippet}
+    {#snippet content()}
+      <ul class="menu menu-compact gap-1 p-2">
         {#each i18n.config.runtime.availableLanguageTags as lang}
           <li>
             <div
-              class="btn flex {lang === languageTag() ? 'active' : 'inactive'}"
+              class="btn flex flex-nowrap {lang === languageTag() ? 'active' : 'inactive'}"
               onclick={() => switchToLanguage(lang)}
               onkeypress={() => switchToLanguage(lang)}
               role="button"
@@ -39,6 +40,6 @@
           </li>
         {/each}
       </ul>
-    </div>
-  </div>
+    {/snippet}
+  </Dropdown>
 {/key}
diff --git a/source/SIL.AppBuilder.Portal/src/lib/projects/components/ProjectActionMenu.svelte b/source/SIL.AppBuilder.Portal/src/lib/projects/components/ProjectActionMenu.svelte
index b298f9960..ac727473e 100644
--- a/source/SIL.AppBuilder.Portal/src/lib/projects/components/ProjectActionMenu.svelte
+++ b/source/SIL.AppBuilder.Portal/src/lib/projects/components/ProjectActionMenu.svelte
@@ -6,8 +6,8 @@
   import { superForm } from 'sveltekit-superforms';
   import type { ProjectActionSchema, ProjectForAction } from '../common';
   import { canArchive, canClaimProject, canReactivate } from '../common';
+  import Dropdown from '$lib/components/Dropdown.svelte';
 
-  
   interface Props {
     data: SuperValidated<Infer<ProjectActionSchema>>;
     project: ProjectForAction;
@@ -50,26 +50,20 @@
       )
     );
   }
-
-  let dropdownOpen: boolean = $state(false);
-
-  function close() {
-    dropdownOpen = false;
-  }
 </script>
 
-<svelte:window onclick={() => close()} />
-
-<details class="dropdown dropdown-bottom dropdown-end" bind:open={dropdownOpen}>
-  <summary
-    class="btn btn-ghost max-h-fit min-h-fit p-1 inline"
-    onclick={() => {
-      $form.projectId = project.Id;
-    }}
-  >
+<Dropdown
+  dropdownClasses="dropdown-bottom dropdown-end"
+  labelClasses="max-h-fit min-h-fit p-1 inline"
+  contentClasses="p-1 min-w-36 w-auto"
+  onclick={() => {
+    $form.projectId = project.Id;
+  }}
+>
+  {#snippet label()}
     <IconContainer icon="charm:menu-kebab" width={20} />
-  </summary>
-  <div class="dropdown-content p-1 bg-base-200 z-10 rounded-md min-w-36 w-auto shadow-lg">
+  {/snippet}
+  {#snippet content()}
     <form method="POST" action="?/{endpoint}" use:enhance>
       <input type="hidden" name="singleId" value={project.Id} />
       <ul class="menu menu-compact overflow-hidden rounded-md">
@@ -107,5 +101,5 @@
         {/if}
       </ul>
     </form>
-  </div>
-</details>
+  {/snippet}
+</Dropdown>
diff --git a/source/SIL.AppBuilder.Portal/src/lib/projects/components/ProjectFilterSelector.svelte b/source/SIL.AppBuilder.Portal/src/lib/projects/components/ProjectFilterSelector.svelte
index 5de8ffede..577850ef4 100644
--- a/source/SIL.AppBuilder.Portal/src/lib/projects/components/ProjectFilterSelector.svelte
+++ b/source/SIL.AppBuilder.Portal/src/lib/projects/components/ProjectFilterSelector.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   import { page } from '$app/state';
+  import Dropdown from '$lib/components/Dropdown.svelte';
   import * as m from '$lib/paraglide/messages';
   import Icon from '@iconify/svelte';
 
@@ -10,21 +11,27 @@
     ['active', m.projects_switcher_dropdown_activeProjects()],
     ['archived', m.projects_switcher_dropdown_archived()]
   ]);
+  let open = $state(false);
 </script>
 
-<div class="dropdown dropdown-start">
-  <!-- When .dropdown is focused, .dropdown-content is revealed making this actually interactive -->
-  <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-  <h1 tabindex="0" class="p-4 pl-6 cursor-pointer">
-    <div class="flex flex-row items-center">
-      {textsForPaths.get(page.params.filter)}
-      <div class="dropdown-icon">
-        <Icon width="24" class="dropdown-icon" icon="gridicons:dropdown" />
+<Dropdown
+  dropdownClasses="dropdown-start"
+  labelClasses="no-animation hover:bg-transparent"
+  contentClasses="overflow-y-auto left-2 p-2 border m-2"
+  bind:open
+>
+  {#snippet label()}
+    <h1 class="p-4 pl-6 cursor-pointer">
+      <div class="flex flex-row items-center">
+        {textsForPaths.get(page.params.filter)}
+        <div class="dropdown-icon" class:open>
+          <Icon width="24" class="dropdown-icon" icon="gridicons:dropdown" />
+        </div>
       </div>
-    </div>
-  </h1>
-  <div class="dropdown-content z-10 overflow-y-auto left-2">
-    <div class="p-2 border m-2 rounded-md bg-base-200 px-4">
+    </h1>
+  {/snippet}
+  {#snippet content()}
+    <div class="px-4">
       {#each textsForPaths as route}
         <a
           href="/projects/{route[0]}{page.params.id ? '/' + page.params.id : ''}"
@@ -35,15 +42,15 @@
         </a>
       {/each}
     </div>
-  </div>
-</div>
+  {/snippet}
+</Dropdown>
 
 <style>
   .dropdown-icon {
     transition: transform 0.15s;
     transform: rotate(0deg);
   }
-  .dropdown:focus-within .dropdown-icon {
+  .dropdown-icon.open {
     transform: rotate(180deg);
   }
 </style>
diff --git a/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/+layout.svelte b/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/+layout.svelte
index caf75982f..8acce7bbd 100644
--- a/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/+layout.svelte
+++ b/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/+layout.svelte
@@ -8,6 +8,7 @@
   import { signOut } from '@auth/sveltekit/client';
   import { RoleId } from 'sil.appbuilder.portal.common/prisma';
   import type { LayoutData } from './$types';
+  import Dropdown from '$lib/components/Dropdown.svelte';
 
   interface Props {
     data: LayoutData;
@@ -53,16 +54,20 @@
   </div>
   <div class="navbar-end">
     <LanguageSelector />
-    <div class="dropdown dropdown-end">
-      <div role="button" class="btn btn-ghost m-2 p-2 rounded-xl" tabindex="0">
+    <Dropdown
+      dropdownClasses="dropdown-end"
+      labelClasses="m-2 p-2 rounded-xl"
+      contentClasses="w-36 overflow-y-auto"
+    >
+      {#snippet label()}
         <img
           src={page.data.session?.user?.image}
           alt="User profile"
           referrerpolicy="no-referrer"
           class="h-full rounded-xl"
         />
-      </div>
-      <div class="dropdown-content w-36 z-10 bg-base-200 rounded-md overflow-y-auto">
+      {/snippet}
+      {#snippet content()}
         <ul class="menu menu-compact gap-1 p-2">
           <li>
             <a href="/users/{page.data.session?.user?.userId ?? ''}/settings/profile">
@@ -83,8 +88,8 @@
             <button onclick={() => signOut({ callbackUrl: '/' })}>{m.header_signOut()}</button>
           </li>
         </ul>
-      </div>
-    </div>
+      {/snippet}
+    </Dropdown>
   </div>
 </div>
 <div class="flex grow min-h-0">
diff --git a/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/projects/[id=idNumber]/+page.svelte b/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/projects/[id=idNumber]/+page.svelte
index c567edbc9..927134a0c 100644
--- a/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/projects/[id=idNumber]/+page.svelte
+++ b/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/projects/[id=idNumber]/+page.svelte
@@ -12,6 +12,7 @@
   import { RoleId } from 'sil.appbuilder.portal.common/prisma';
   import { superForm } from 'sveltekit-superforms';
   import type { PageData } from './$types';
+  import Dropdown from '$lib/components/Dropdown.svelte';
 
   const langtagmap = new Map(langtags.map((tag) => [tag.tag, /* tag.localname ?? */ tag.name]));
 
@@ -276,15 +277,16 @@
                   <br />
                   {getRelativeTime(product.DatePublished)}
                 </span>
-                <span>
+                <span class="dropdown-wrapper">
                   <!-- TODO: also need any actions given by api? -->
-                  <div role="button" class="dropdown" tabindex="0">
-                    <div class="btn btn-ghost px-1">
+                  <Dropdown
+                    labelClasses="px-1"
+                    contentClasses="drop-arrow bottom-12 right-0 p-1 min-w-36 w-auto"
+                  >
+                    {#snippet label()}
                       <IconContainer icon="charm:menu-kebab" width="20" />
-                    </div>
-                    <div
-                      class="dropdown-content bottom-12 right-0 p-1 bg-base-200 z-10 rounded-md min-w-36 w-auto shadow-lg"
-                    >
+                    {/snippet}
+                    {#snippet content()}
                       <ul class="menu menu-compact overflow-hidden rounded-md">
                         <li class="w-full rounded-none">
                           <button class="text-nowrap" onclick={() => openModal(product.Id)}>
@@ -311,7 +313,7 @@
                             </a>
                           </li>
                         {/if}
-                        <li class=" w-full rounded-none">
+                        <li class="w-full rounded-none">
                           <!-- Might want a confirmation modal -->
                           <form action="?/deleteProduct" method="post" use:enhance>
                             <input type="hidden" name="id" value={product.Id} />
@@ -321,8 +323,8 @@
                           </form>
                         </li>
                       </ul>
-                    </div>
-                  </div>
+                    {/snippet}
+                  </Dropdown>
                 </span>
               </div>
               <div class="p-2 flex gap-1">
@@ -431,21 +433,18 @@
                 <IconContainer icon="mdi:user" width="20" />
                 {m.project_side_projectOwner()}
               </span>
-              <span class="text-right flex place-content-end">
-                <div class="dropdown" role="button" tabindex="0">
-                  <div
-                    class="btn btn-ghost p-0.5 h-auto min-h-0 no-animation flex-nowrap items-center font-normal"
-                  >
+              <span class="text-right flex place-content-end dropdown-wrapper">
+                <Dropdown
+                  labelClasses="p-0.5 h-auto min-h-0 no-animation flex-nowrap items-center font-normal"
+                  contentClasses="drop-arrow arrow-top menu z-20 min-w-[10rem] top-8 right-0"
+                >
+                  {#snippet label()}
                     <span class="flex items-center pl-1">
                       {data.project?.Owner.Name}
                       <IconContainer icon="gridicons:dropdown" width="20" />
                     </span>
-                  </div>
-                  <div
-                    role="button"
-                    tabindex="0"
-                    class="dropdown-content arrow-top menu drop-shadow-lg bg-base-200 z-20 min-w-[10rem] top-8 right-0 rounded-md"
-                  >
+                  {/snippet}
+                  {#snippet content()}
                     <input
                       type="hidden"
                       name="owner"
@@ -468,8 +467,8 @@
                         </li>
                       {/each}
                     </ul>
-                  </div>
-                </div>
+                  {/snippet}
+                </Dropdown>
               </span>
             </div>
             <div class="divider my-2"></div>
@@ -478,21 +477,18 @@
                 <IconContainer icon="mdi:account-group" width={20} />
                 {m.project_side_projectGroup()}
               </span>
-              <span class="shrink text-right flex place-content-end items-center">
-                <div class="dropdown" role="button" tabindex="0">
-                  <div
-                    class="btn btn-ghost p-0.5 h-auto min-h-0 no-animation flex-nowrap items-center font-normal"
-                  >
+              <span class="shrink text-right flex place-content-end items-center dropdown-wrapper">
+                <Dropdown
+                  labelClasses="p-0.5 h-auto min-h-0 no-animation flex-nowrap items-center font-normal"
+                  contentClasses="drop-arrow arrow-top menu z-20 min-w-[10rem] top-8 right-0"
+                >
+                  {#snippet label()}
                     <span class="flex items-center pl-1">
                       {data.project?.Group.Name}
                       <IconContainer icon="gridicons:dropdown" width="20" />
                     </span>
-                  </div>
-                  <div
-                    role="button"
-                    tabindex="0"
-                    class="dropdown-content arrow-top menu drop-shadow-lg bg-base-200 z-20 min-w-[10rem] top-8 right-0 rounded-md"
-                  >
+                  {/snippet}
+                  {#snippet content()}
                     <input
                       type="hidden"
                       name="group"
@@ -515,8 +511,8 @@
                         </li>
                       {/each}
                     </ul>
-                  </div>
-                </div>
+                  {/snippet}
+                </Dropdown>
               </span>
             </div>
           </div>
@@ -633,7 +629,7 @@
       flex-direction: row;
     }
   }
-  div.dropdown-content::after {
+  .dropdown-wrapper :global(.drop-arrow::after) {
     content: '';
     width: 10px;
     height: 10px;
@@ -643,7 +639,7 @@
     right: 10px;
     background-color: var(--fallback-b2, oklch(var(--b2) / var(--tw-bg-opacity)));
   }
-  div.dropdown-content.arrow-top::after {
+  .dropdown-wrapper :global(.drop-arrow.arrow-top::after) {
     bottom: auto;
     top: -5px;
   }
diff --git a/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/workflow-instances/[product_id]/+page.svelte b/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/workflow-instances/[product_id]/+page.svelte
index 039e41d50..3d5b4b78b 100644
--- a/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/workflow-instances/[product_id]/+page.svelte
+++ b/source/SIL.AppBuilder.Portal/src/routes/(authenticated)/workflow-instances/[product_id]/+page.svelte
@@ -7,6 +7,7 @@
   import { superForm } from 'sveltekit-superforms';
   import { Anchor, Node, Svelvet } from 'svelvet';
   import type { PageData } from './$types';
+  import Dropdown from '$lib/components/Dropdown.svelte';
 
   interface Props {
     data: PageData;
@@ -127,13 +128,11 @@
       </ul>
     </div>
     <span class="navbar-end w-auto">
-      <div role="button" class="dropdown" tabindex="0">
-        <div class="btn btn-ghost px-1">
+      <Dropdown labelClasses="px-1" contentClasses="top-12 right-0 p-1 min-w-36 w-auto">
+        {#snippet label()}
           <IconContainer icon="charm:menu-kebab" width="20" />
-        </div>
-        <div
-          class="dropdown-content top-12 right-0 p-1 bg-base-200 z-10 rounded-md min-w-36 w-auto shadow-lg"
-        >
+        {/snippet}
+        {#snippet content()}
           <ul class="menu menu-compact overflow-hidden rounded-md">
             <li class="w-full rounded-none">
               <button class="text-nowrap" onclick={() => openModal(data.product.Id)}>
@@ -151,8 +150,8 @@
               </form>
             </li>
           </ul>
-        </div>
-      </div>
+        {/snippet}
+      </Dropdown>
     </span>
   </div>
   <ProductDetails product={data.product} />