From a384bc5178e9c7f0c98f526bc176998d9a4bf34a Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sat, 28 Feb 2026 11:01:38 -0500
Subject: [PATCH 01/11] Replace BDropdown family with custom GDropdown
 components

Created 7 new components (GDropdown, GDropdownItem, GDropdownDivider,
GDropdownText, GDropdownGroup, GDropdownForm, GDropdownItemButton) that
use Bootstrap 4 CSS classes directly with native DOM click-outside
handling and provide/inject for menu auto-close. Migrated all 27 files
that imported from bootstrap-vue's dropdown family.
---
 .../components/BaseComponents/GDropdown.vue   | 234 ++++++++++++++++++
 .../BaseComponents/GDropdownDivider.vue       |   5 +
 .../BaseComponents/GDropdownForm.vue          |   7 +
 .../BaseComponents/GDropdownGroup.vue         |  20 ++
 .../BaseComponents/GDropdownItem.vue          |  84 +++++++
 .../BaseComponents/GDropdownItemButton.vue    |  48 ++++
 .../BaseComponents/GDropdownText.vue          |   7 +
 .../common/PairingFilterInputGroup.vue        |  17 +-
 .../components/Common/FilterMenuDropdown.vue  |  22 +-
 client/src/components/Common/GCard.vue        |  12 +-
 client/src/components/Common/GTable.vue       |  12 +-
 client/src/components/Common/ListHeader.vue   |  21 +-
 .../FormData/FormDataContextButtons.vue       |  13 +-
 .../History/Content/ContentOptions.vue        |  19 +-
 .../Content/Dataset/DatasetDownload.vue       |  17 +-
 .../HistoryOperations/DefaultOperations.vue   |  20 +-
 .../HistoryOperations/SelectionOperations.vue |  79 +++---
 .../src/components/History/HistoryOptions.vue |  78 +++---
 .../LibraryFolder/TopToolbar/FolderTopBar.vue |  50 ++--
 .../components/Masthead/MastheadDropdown.vue  |   7 +-
 .../components/Panels/Menus/PanelViewMenu.vue |  14 +-
 .../Panels/Menus/PanelViewMenuItem.vue        |   7 +-
 .../Tool/Buttons/ToolOptionsButton.vue        |  31 +--
 .../Tool/Buttons/ToolTourGeneratorItem.vue    |   6 +-
 .../Tool/Buttons/ToolVersionsButton.vue       |  11 +-
 .../components/ToolsList/ToolOntologies.vue   |  14 +-
 .../ToolsList/ToolsListSectionFilters.vue     |  37 +--
 .../Visualizations/VisualizationExamples.vue  |  17 +-
 .../src/components/Workflow/Editor/Index.vue  |  20 +-
 .../Workflow/Editor/NodeInspector.vue         |  17 +-
 .../WorkflowInvocationMetrics.vue             |  28 ++-
 31 files changed, 716 insertions(+), 258 deletions(-)
 create mode 100644 client/src/components/BaseComponents/GDropdown.vue
 create mode 100644 client/src/components/BaseComponents/GDropdownDivider.vue
 create mode 100644 client/src/components/BaseComponents/GDropdownForm.vue
 create mode 100644 client/src/components/BaseComponents/GDropdownGroup.vue
 create mode 100644 client/src/components/BaseComponents/GDropdownItem.vue
 create mode 100644 client/src/components/BaseComponents/GDropdownItemButton.vue
 create mode 100644 client/src/components/BaseComponents/GDropdownText.vue

diff --git a/client/src/components/BaseComponents/GDropdown.vue b/client/src/components/BaseComponents/GDropdown.vue
new file mode 100644
index 000000000000..2b584dfc2749
--- /dev/null
+++ b/client/src/components/BaseComponents/GDropdown.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+/**
+ * Dropdown component replacing BDropdown from bootstrap-vue.
+ * Uses Bootstrap 4 CSS classes for styling, native DOM for click-outside.
+ * Supports toggle text/slot, right-aligned menus, sizes, variants,
+ * split buttons, dropup, no-caret, and menu/toggle class customization.
+ */
+
+import { computed, nextTick, onBeforeUnmount, onMounted, provide, ref } from "vue";
+
+const props = withDefaults(
+    defineProps<{
+        /** Text for the toggle button */
+        text?: string;
+        /** Button variant (primary, secondary, link, info, etc.) */
+        variant?: string;
+        /** Button size (sm, lg) */
+        size?: string;
+        /** Align dropdown menu to the right */
+        right?: boolean;
+        /** Hide the caret icon */
+        noCaret?: boolean;
+        /** Prevent menu from flipping */
+        noFlip?: boolean;
+        /** Drop direction */
+        dropup?: boolean;
+        dropleft?: boolean;
+        dropright?: boolean;
+        /** Full-width block style */
+        block?: boolean;
+        /** Split button mode */
+        split?: boolean;
+        /** Extra classes for the toggle button */
+        toggleClass?: string | string[] | Record<string, boolean>;
+        /** Extra classes for the dropdown menu */
+        menuClass?: string | string[] | Record<string, boolean>;
+        /** Boundary for positioning */
+        boundary?: string;
+        /** Disabled state */
+        disabled?: boolean;
+        /** ARIA role */
+        role?: string;
+        /** Lazy render menu content */
+        lazy?: boolean;
+        /** Offset */
+        offset?: number | string;
+    }>(),
+    {
+        text: undefined,
+        variant: "secondary",
+        size: undefined,
+        right: false,
+        noCaret: false,
+        noFlip: false,
+        dropup: false,
+        dropleft: false,
+        dropright: false,
+        block: false,
+        split: false,
+        toggleClass: undefined,
+        menuClass: undefined,
+        boundary: undefined,
+        disabled: false,
+        role: undefined,
+        lazy: false,
+        offset: undefined,
+    },
+);
+
+const emit = defineEmits<{
+    (e: "show"): void;
+    (e: "hide"): void;
+    (e: "click", event: MouseEvent): void;
+}>();
+
+const isOpen = ref(false);
+const dropdownEl = ref<HTMLDivElement>();
+const menuEl = ref<HTMLDivElement>();
+const hasBeenOpened = ref(false);
+
+function toggle(event?: MouseEvent) {
+    if (props.disabled) {
+        return;
+    }
+    if (isOpen.value) {
+        hide();
+    } else {
+        show();
+    }
+    if (event) {
+        event.stopPropagation();
+    }
+}
+
+function show() {
+    if (props.disabled || isOpen.value) {
+        return;
+    }
+    isOpen.value = true;
+    hasBeenOpened.value = true;
+    emit("show");
+    nextTick(() => {
+        document.addEventListener("click", onClickOutside, true);
+    });
+}
+
+function hide() {
+    if (!isOpen.value) {
+        return;
+    }
+    isOpen.value = false;
+    emit("hide");
+    document.removeEventListener("click", onClickOutside, true);
+}
+
+function onClickOutside(event: Event) {
+    if (dropdownEl.value && !dropdownEl.value.contains(event.target as Node)) {
+        hide();
+    }
+}
+
+function onSplitClick(event: MouseEvent) {
+    emit("click", event);
+}
+
+// Provide hide function to child items so they can close the menu on click
+provide("g-dropdown-hide", hide);
+
+const containerClasses = computed(() => ({
+    "btn-group": !props.block,
+    dropdown: !props.dropup && !props.dropleft && !props.dropright,
+    dropup: props.dropup,
+    dropleft: props.dropleft,
+    dropright: props.dropright,
+    show: isOpen.value,
+    "d-flex": props.block,
+}));
+
+const toggleBtnClasses = computed(() => {
+    const classes: (string | string[] | Record<string, boolean>)[] = ["dropdown-toggle", `btn-${props.variant}`];
+    if (props.size) {
+        classes.push(`btn-${props.size}`);
+    }
+    if (props.noCaret) {
+        classes.push("dropdown-toggle-no-caret");
+    }
+    if (props.split) {
+        classes.push("dropdown-toggle-split");
+    }
+    if (props.block) {
+        classes.push("flex-grow-1");
+    }
+    if (props.toggleClass) {
+        classes.push(props.toggleClass);
+    }
+    return classes;
+});
+
+const menuClasses = computed(() => {
+    const classes: (string | string[] | Record<string, boolean>)[] = ["dropdown-menu"];
+    if (isOpen.value) {
+        classes.push("show");
+    }
+    if (props.right) {
+        classes.push("dropdown-menu-right");
+    }
+    if (props.menuClass) {
+        classes.push(props.menuClass);
+    }
+    return classes;
+});
+
+const shouldRenderMenu = computed(() => {
+    if (!props.lazy) {
+        return true;
+    }
+    return hasBeenOpened.value;
+});
+
+onMounted(() => {
+    // Clean up on mount if needed
+});
+
+onBeforeUnmount(() => {
+    document.removeEventListener("click", onClickOutside, true);
+});
+
+defineExpose({
+    show,
+    hide,
+    toggle,
+});
+</script>
+
+<template>
+    <div ref="dropdownEl" :class="containerClasses" :role="role">
+        <!-- Split button: action button + toggle -->
+        <button
+            v-if="split"
+            type="button"
+            class="btn"
+            :class="[`btn-${variant}`, size ? `btn-${size}` : '']"
+            :disabled="disabled"
+            @click="onSplitClick">
+            <slot name="button-content">{{ text }}</slot>
+        </button>
+
+        <!-- Toggle button -->
+        <button
+            type="button"
+            class="btn"
+            :class="toggleBtnClasses"
+            :disabled="disabled"
+            aria-haspopup="true"
+            :aria-expanded="isOpen"
+            @click="toggle">
+            <template v-if="!split">
+                <slot name="button-content">{{ text }}</slot>
+            </template>
+            <span v-if="split" class="sr-only">Toggle Dropdown</span>
+        </button>
+
+        <!-- Dropdown menu -->
+        <div v-if="shouldRenderMenu" ref="menuEl" :class="menuClasses" :role="role === 'menu' ? 'menu' : undefined">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.dropdown-toggle-no-caret::after {
+    display: none !important;
+}
+</style>
diff --git a/client/src/components/BaseComponents/GDropdownDivider.vue b/client/src/components/BaseComponents/GDropdownDivider.vue
new file mode 100644
index 000000000000..f49f0ea94b06
--- /dev/null
+++ b/client/src/components/BaseComponents/GDropdownDivider.vue
@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div class="dropdown-divider" role="separator" />
+</template>
diff --git a/client/src/components/BaseComponents/GDropdownForm.vue b/client/src/components/BaseComponents/GDropdownForm.vue
new file mode 100644
index 000000000000..c8f41d57f4e4
--- /dev/null
+++ b/client/src/components/BaseComponents/GDropdownForm.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+    <form class="px-4 py-3" role="presentation" @click.stop @submit.prevent>
+        <slot />
+    </form>
+</template>
diff --git a/client/src/components/BaseComponents/GDropdownGroup.vue b/client/src/components/BaseComponents/GDropdownGroup.vue
new file mode 100644
index 000000000000..47cb752bdfa7
--- /dev/null
+++ b/client/src/components/BaseComponents/GDropdownGroup.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+/**
+ * Dropdown item group with optional header.
+ * Replaces BDropdownGroup from bootstrap-vue.
+ */
+
+defineProps<{
+    /** Group header text (or use #header slot) */
+    header?: string;
+}>();
+</script>
+
+<template>
+    <div role="group">
+        <h6 v-if="header || $slots.header" class="dropdown-header" role="presentation">
+            <slot name="header">{{ header }}</slot>
+        </h6>
+        <slot />
+    </div>
+</template>
diff --git a/client/src/components/BaseComponents/GDropdownItem.vue b/client/src/components/BaseComponents/GDropdownItem.vue
new file mode 100644
index 000000000000..e90596ad7c59
--- /dev/null
+++ b/client/src/components/BaseComponents/GDropdownItem.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+/**
+ * Dropdown menu item replacing BDropdownItem from bootstrap-vue.
+ * Renders as a router-link, anchor, or button depending on props.
+ */
+
+import { computed, inject } from "vue";
+
+const props = withDefaults(
+    defineProps<{
+        /** Router link destination */
+        to?: string | object;
+        /** External link URL */
+        href?: string;
+        /** Link target (_blank, etc.) */
+        target?: string;
+        /** Active state */
+        active?: boolean;
+        /** Disabled state */
+        disabled?: boolean;
+        /** Color variant */
+        variant?: string;
+        /** Title/tooltip text */
+        title?: string;
+    }>(),
+    {
+        to: undefined,
+        href: undefined,
+        target: undefined,
+        active: false,
+        disabled: false,
+        variant: undefined,
+        title: undefined,
+    },
+);
+
+const emit = defineEmits<{
+    (e: "click", event: MouseEvent): void;
+}>();
+
+const hideDropdown = inject<() => void>("g-dropdown-hide", () => {});
+
+const classes = computed(() => ({
+    "dropdown-item": true,
+    active: props.active,
+    disabled: props.disabled,
+    [`text-${props.variant}`]: !!props.variant,
+}));
+
+function onClick(event: MouseEvent) {
+    if (props.disabled) {
+        event.preventDefault();
+        return;
+    }
+    emit("click", event);
+    hideDropdown();
+}
+
+const tag = computed(() => {
+    if (props.to) {
+        return "router-link";
+    }
+    if (props.href) {
+        return "a";
+    }
+    return "button";
+});
+</script>
+
+<template>
+    <component
+        :is="tag"
+        :class="classes"
+        :to="to"
+        :href="href"
+        :target="target"
+        :title="title"
+        :disabled="disabled || undefined"
+        :type="tag === 'button' ? 'button' : undefined"
+        role="menuitem"
+        @click="onClick">
+        <slot />
+    </component>
+</template>
diff --git a/client/src/components/BaseComponents/GDropdownItemButton.vue b/client/src/components/BaseComponents/GDropdownItemButton.vue
new file mode 100644
index 000000000000..55dd6ed6dc5b
--- /dev/null
+++ b/client/src/components/BaseComponents/GDropdownItemButton.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+/**
+ * Button-style dropdown item (no link behavior).
+ * Replaces BDropdownItemButton from bootstrap-vue.
+ */
+
+import { computed, inject } from "vue";
+
+const props = withDefaults(
+    defineProps<{
+        active?: boolean;
+        disabled?: boolean;
+        variant?: string;
+    }>(),
+    {
+        active: false,
+        disabled: false,
+        variant: undefined,
+    },
+);
+
+const emit = defineEmits<{
+    (e: "click", event: MouseEvent): void;
+}>();
+
+const hideDropdown = inject<() => void>("g-dropdown-hide", () => {});
+
+const classes = computed(() => ({
+    "dropdown-item": true,
+    active: props.active,
+    disabled: props.disabled,
+    [`text-${props.variant}`]: !!props.variant,
+}));
+
+function onClick(event: MouseEvent) {
+    if (props.disabled) {
+        return;
+    }
+    emit("click", event);
+    hideDropdown();
+}
+</script>
+
+<template>
+    <button type="button" :class="classes" :disabled="disabled" role="menuitem" @click="onClick">
+        <slot />
+    </button>
+</template>
diff --git a/client/src/components/BaseComponents/GDropdownText.vue b/client/src/components/BaseComponents/GDropdownText.vue
new file mode 100644
index 000000000000..35917d3977d6
--- /dev/null
+++ b/client/src/components/BaseComponents/GDropdownText.vue
@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div class="dropdown-item-text" role="presentation">
+        <slot />
+    </div>
+</template>
diff --git a/client/src/components/Collections/common/PairingFilterInputGroup.vue b/client/src/components/Collections/common/PairingFilterInputGroup.vue
index 3f35403e3e5c..899708f85233 100644
--- a/client/src/components/Collections/common/PairingFilterInputGroup.vue
+++ b/client/src/components/Collections/common/PairingFilterInputGroup.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
-import { BDropdown, BDropdownItem, BFormInput, BInputGroup } from "bootstrap-vue";
+import { BFormInput, BInputGroup } from "bootstrap-vue";
 import { ref, watch } from "vue";
 
 import { COMMON_FILTERS } from "@/components/Collections/pairing";
 
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
+
 interface Props {
     forwardFilter: string;
     reverseFilter: string;
@@ -46,17 +49,17 @@ watch(currentReverseFilter, resync);
 <template>
     <BInputGroup size="lg">
         <template v-slot:prepend>
-            <BDropdown text="Filters" variant="info">
-                <BDropdownItem
+            <GDropdown text="Filters" variant="info">
+                <GDropdownItem
                     v-for="([forward, reverse], index) of COMMON_FILTERS"
                     :key="index"
                     @click="update(forward, reverse)">
                     {{ forward }} / {{ reverse }}
-                </BDropdownItem>
-                <BDropdownItem @click="update('', '')">
+                </GDropdownItem>
+                <GDropdownItem @click="update('', '')">
                     <i>Clear All Filtering</i>
-                </BDropdownItem>
-            </BDropdown>
+                </GDropdownItem>
+            </GDropdown>
         </template>
 
         <BFormInput v-model="currentForwardFilter"></BFormInput>
diff --git a/client/src/components/Common/FilterMenuDropdown.vue b/client/src/components/Common/FilterMenuDropdown.vue
index 21883e6e0cc7..262f8ef3953a 100644
--- a/client/src/components/Common/FilterMenuDropdown.vue
+++ b/client/src/components/Common/FilterMenuDropdown.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faQuestion } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BDropdown, BDropdownItem, BInputGroup, BInputGroupAppend } from "bootstrap-vue";
+import { BButton, BInputGroup, BInputGroupAppend } from "bootstrap-vue";
 import { computed, onMounted, ref, watch } from "vue";
 
 import type { QuotaUsage } from "@/api/users";
@@ -9,6 +9,8 @@ import { useQuotaUsageStore } from "@/stores/quotaUsageStore";
 import type { FilterType, ValidFilter } from "@/utils/filtering";
 import { capitalizeFirstLetter } from "@/utils/strings";
 
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 import GModal from "../BaseComponents/GModal.vue";
 import QuotaUsageBar from "@/components/User/DiskUsage/Quota/QuotaUsageBar.vue";
 
@@ -130,7 +132,7 @@ function setValue(val: FilterValue) {
     <div v-if="datalist || hasMultipleQuotaSources">
         <small>Filter by {{ props.filter.placeholder }}:</small>
         <BInputGroup :id="`${identifier}-advanced-filter-${props.name}`" class="flex-nowrap">
-            <BDropdown
+            <GDropdown
                 :text="dropDownText"
                 block
                 class="w-100"
@@ -139,28 +141,28 @@ function setValue(val: FilterValue) {
                 boundary="window"
                 :disabled="props.disabled"
                 :toggle-class="props.error ? 'text-danger' : ''">
-                <BDropdownItem href="#" @click="setValue(undefined)"><i>(any)</i></BDropdownItem>
+                <GDropdownItem href="#" @click="setValue(undefined)"><i>(any)</i></GDropdownItem>
 
                 <span v-if="stringDatalist.length > 0">
-                    <BDropdownItem
+                    <GDropdownItem
                         v-for="listItem in stringDatalist"
                         :key="listItem"
                         href="#"
                         @click="setValue(listItem)">
                         {{ listItem }}
-                    </BDropdownItem>
+                    </GDropdownItem>
                 </span>
                 <span v-else-if="objectDatalist.length > 0">
-                    <BDropdownItem
+                    <GDropdownItem
                         v-for="listItem in objectDatalist"
                         :key="listItem.value"
                         href="#"
                         @click="setValue(listItem.value)">
                         {{ listItem.text }}
-                    </BDropdownItem>
+                    </GDropdownItem>
                 </span>
                 <span v-else-if="props.type === 'QuotaSource'">
-                    <BDropdownItem
+                    <GDropdownItem
                         v-for="quotaUsage in quotaUsages"
                         :key="quotaUsage.sourceLabel"
                         href="#"
@@ -171,9 +173,9 @@ function setValue(val: FilterValue) {
                             class="quota-usage-bar"
                             :compact="true"
                             :embedded="true" />
-                    </BDropdownItem>
+                    </GDropdownItem>
                 </span>
-            </BDropdown>
+            </GDropdown>
             <BInputGroupAppend>
                 <!-- append Help Modal toggle for filter if included -->
                 <BButton v-if="props.filter.helpInfo" :title="modalTitle" size="sm" @click="helpToggle = true">
diff --git a/client/src/components/Common/GCard.vue b/client/src/components/Common/GCard.vue
index 262f87c76037..5e413710c954 100644
--- a/client/src/components/Common/GCard.vue
+++ b/client/src/components/Common/GCard.vue
@@ -2,7 +2,7 @@
 import { faStar as farStar } from "@fortawesome/free-regular-svg-icons";
 import { faCaretDown, faEdit, faPen, faSpinner, faStar, type IconDefinition } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BBadge, BButton, BButtonGroup, BDropdown, BDropdownItem, BFormCheckbox, BLink } from "bootstrap-vue";
+import { BBadge, BButton, BButtonGroup, BFormCheckbox, BLink } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import { useMarkdown } from "@/composables/markdown";
@@ -11,6 +11,8 @@ import localize from "@/utils/localization";
 
 import type { CardAction, CardBadge, CardIndicator, Title, TitleIcon, TitleSize } from "./GCard.types";
 
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 import Heading from "@/components/Common/Heading.vue";
 import TextSummary from "@/components/Common/TextSummary.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
@@ -481,7 +483,7 @@ function onKeyDown(event: KeyboardEvent) {
                                 </slot>
 
                                 <slot name="extra-actions">
-                                    <BDropdown
+                                    <GDropdown
                                         v-if="
                                             props.extraActions?.length &&
                                             props.extraActions.some((ea) => ea.visible ?? true)
@@ -500,7 +502,7 @@ function onKeyDown(event: KeyboardEvent) {
                                         </template>
 
                                         <template v-for="ea in props.extraActions">
-                                            <BDropdownItem
+                                            <GDropdownItem
                                                 v-if="ea.visible ?? true"
                                                 :id="getActionId(props.id, ea.id)"
                                                 :key="ea.id"
@@ -514,9 +516,9 @@ function onKeyDown(event: KeyboardEvent) {
                                                 @click="ea.handler && ea.handler()">
                                                 <FontAwesomeIcon v-if="ea.icon" :icon="ea.icon" fixed-width />
                                                 {{ localize(ea.label) }}
-                                            </BDropdownItem>
+                                            </GDropdownItem>
                                         </template>
-                                    </BDropdown>
+                                    </GDropdown>
                                 </slot>
                             </div>
 
diff --git a/client/src/components/Common/GTable.vue b/client/src/components/Common/GTable.vue
index 4fb2851c12c7..ae2ea119b3e8 100644
--- a/client/src/components/Common/GTable.vue
+++ b/client/src/components/Common/GTable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import { faEllipsisV, faSort, faSortDown, faSortUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BDropdown, BDropdownItem, BFormCheckbox } from "bootstrap-vue";
+import { BAlert, BFormCheckbox } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import type { BootstrapSize } from "@/components/Common";
@@ -18,6 +18,8 @@ import type {
     TableItemClassMeta,
 } from "./GTable.types";
 
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 import GOverlay from "@/components/BaseComponents/GOverlay.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -838,7 +840,7 @@ defineExpose({
                                     <!-- Actions column -->
                                     <td v-if="props.actions" class="g-table-actions-column">
                                         <slot name="actions" :item="item" :index="getGlobalIndex(paginatedIndex)">
-                                            <BDropdown
+                                            <GDropdown
                                                 v-g-tooltip.hover
                                                 no-caret
                                                 right
@@ -852,7 +854,7 @@ defineExpose({
                                                 </template>
 
                                                 <template v-for="ac in props.actions">
-                                                    <BDropdownItem
+                                                    <GDropdownItem
                                                         v-if="ac.visible ?? true"
                                                         :id="ac.id"
                                                         :key="ac.id"
@@ -869,9 +871,9 @@ defineExpose({
                                                         ">
                                                         <FontAwesomeIcon v-if="ac.icon" :icon="ac.icon" fixed-width />
                                                         {{ ac.label }}
-                                                    </BDropdownItem>
+                                                    </GDropdownItem>
                                                 </template>
-                                            </BDropdown>
+                                            </GDropdown>
                                         </slot>
                                     </td>
                                 </tr>
diff --git a/client/src/components/Common/ListHeader.vue b/client/src/components/Common/ListHeader.vue
index f65eae24ad16..e4859f6ef656 100644
--- a/client/src/components/Common/ListHeader.vue
+++ b/client/src/components/Common/ListHeader.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { faAngleDown, faAngleUp, faBars, faCog, faGripVertical, faUndo } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BDropdown, BDropdownGroup, BDropdownHeader, BDropdownItem, BFormCheckbox } from "bootstrap-vue";
+import { BFormCheckbox } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import { type ListViewMode, useUserStore } from "@/stores/userStore";
 
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GButtonGroup from "@/components/BaseComponents/GButtonGroup.vue";
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownGroup from "@/components/BaseComponents/GDropdownGroup.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 
 type SortBy = string;
 
@@ -145,7 +148,7 @@ defineExpose({
                 </GButtonGroup>
             </div>
 
-            <BDropdown
+            <GDropdown
                 v-if="columnOptions.length > 0"
                 text="Columns"
                 size="sm"
@@ -156,8 +159,8 @@ defineExpose({
                     <FontAwesomeIcon :icon="faCog" fixed-width />
                 </template>
 
-                <BDropdownGroup>
-                    <BDropdownHeader>
+                <GDropdownGroup>
+                    <h6 class="dropdown-header">
                         Show/Hide Columns
                         <GButton
                             v-if="isAColumnNotVisible"
@@ -167,9 +170,9 @@ defineExpose({
                             @click="onResetColumns">
                             <FontAwesomeIcon :icon="faUndo" fixed-width />
                         </GButton>
-                    </BDropdownHeader>
+                    </h6>
 
-                    <BDropdownItem
+                    <GDropdownItem
                         v-for="column in columnOptions"
                         :key="column.key"
                         :disabled="column.key === 'name'"
@@ -180,9 +183,9 @@ defineExpose({
                             @click.prevent>
                             {{ column.label }}
                         </BFormCheckbox>
-                    </BDropdownItem>
-                </BDropdownGroup>
-            </BDropdown>
+                    </GDropdownItem>
+                </GDropdownGroup>
+            </GDropdown>
 
             <slot name="extra-filter" />
         </div>
diff --git a/client/src/components/Form/Elements/FormData/FormDataContextButtons.vue b/client/src/components/Form/Elements/FormData/FormDataContextButtons.vue
index 911111cf1fad..964039752f57 100644
--- a/client/src/components/Form/Elements/FormData/FormDataContextButtons.vue
+++ b/client/src/components/Form/Elements/FormData/FormDataContextButtons.vue
@@ -2,7 +2,7 @@
 import { faFolder } from "@fortawesome/free-regular-svg-icons";
 import { faEye, faPlus, faSpinner, faTimes, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BButtonGroup, BDropdown, BDropdownItem } from "bootstrap-vue";
+import { BButton, BButtonGroup } from "bootstrap-vue";
 import { computed } from "vue";
 
 import type { CollectionType } from "@/api/datasetCollections";
@@ -17,6 +17,9 @@ import { capitalizeFirstLetter } from "@/utils/strings";
 import { buildersForCollectionTypes, unconstrainedCollectionTypeBuilders } from "./collections";
 import type { VariantInterface } from "./variants";
 
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
+
 const props = defineProps<{
     variant?: VariantInterface[];
     currentField?: number;
@@ -129,7 +132,7 @@ const defaultCollectionBuilderType = computed<CollectionBuilderType>(() => {
         <!-- three options here - source is a collection that has multiple builders exposed, source is a collection
              that has a single builder exposed, or source is dataset(s). -->
         <template v-if="props.showViewCreateOptions && sourceIsCollection && !hasSingleAvailableCollectionBuilderType">
-            <BDropdown
+            <GDropdown
                 v-g-tooltip.bottom.hover
                 class="d-flex"
                 data-description="upload"
@@ -137,13 +140,13 @@ const defaultCollectionBuilderType = computed<CollectionBuilderType>(() => {
                 split
                 text="Create"
                 @click="createCollectionType(defaultCollectionBuilderType)">
-                <BDropdownItem
+                <GDropdownItem
                     v-for="colType in availableCollectionBuilders"
                     :key="colType"
                     @click="createCollectionType(colType)">
                     {{ capitalizeFirstLetter(COLLECTION_TYPE_TO_LABEL[colType] || "collection") }}
-                </BDropdownItem>
-            </BDropdown>
+                </GDropdownItem>
+            </GDropdown>
             <BButton
                 v-if="props.workflowTab === 'create'"
                 v-g-tooltip.bottom.hover
diff --git a/client/src/components/History/Content/ContentOptions.vue b/client/src/components/History/Content/ContentOptions.vue
index e4de87be7cea..d98d49470a9b 100644
--- a/client/src/components/History/Content/ContentOptions.vue
+++ b/client/src/components/History/Content/ContentOptions.vue
@@ -11,7 +11,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
-import { BButton, BDropdown } from "bootstrap-vue";
+import { BButton } from "bootstrap-vue";
 //@ts-ignore deprecated package without types (vue 2, remove this comment on vue 3 migration)
 import { ScanEye } from "lucide-vue";
 import { computed, type Ref, ref } from "vue";
@@ -21,6 +21,9 @@ import { useEntryPointStore } from "@/stores/entryPointStore";
 import localize from "@/utils/localization";
 import { prependPath } from "@/utils/redirect";
 
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
+
 const props = defineProps({
     writable: { type: Boolean, default: true },
     isDataset: { type: Boolean, required: true },
@@ -44,7 +47,7 @@ const emit = defineEmits<{
 
 const entryPointStore = useEntryPointStore();
 const errorMessage = ref("");
-const deleteCollectionMenu: Ref<BDropdown | null> = ref(null);
+const deleteCollectionMenu: Ref<InstanceType<typeof GDropdown> | null> = ref(null);
 
 const editButtonTitle = computed(() => (editDisabled.value ? "This dataset is not yet editable." : "Edit attributes"));
 const editDisabled = computed(() =>
@@ -166,19 +169,19 @@ function onDisplay($event: MouseEvent) {
             variant="link"
             @click.stop="onDelete($event)">
             <FontAwesomeIcon v-if="isDataset" :icon="faTrash" />
-            <BDropdown v-else ref="deleteCollectionMenu" size="sm" variant="link" no-caret toggle-class="p-0 m-0">
+            <GDropdown v-else ref="deleteCollectionMenu" size="sm" variant="link" no-caret toggle-class="p-0 m-0">
                 <template v-slot:button-content>
                     <FontAwesomeIcon :icon="faTrash" />
                 </template>
-                <b-dropdown-item title="Delete collection only" @click.prevent.stop="onDeleteItem">
+                <GDropdownItem title="Delete collection only" @click.prevent.stop="onDeleteItem">
                     <FontAwesomeIcon :icon="faFile" />
                     Collection only
-                </b-dropdown-item>
-                <b-dropdown-item title="Delete collection and elements" @click.prevent.stop="onDeleteItemRecursively">
+                </GDropdownItem>
+                <GDropdownItem title="Delete collection and elements" @click.prevent.stop="onDeleteItemRecursively">
                     <FontAwesomeIcon :icon="faCopy" />
                     Collection and elements
-                </b-dropdown-item>
-            </BDropdown>
+                </GDropdownItem>
+            </GDropdown>
         </BButton>
         <BButton
             v-if="writable && isHistoryItem && isDeleted"
diff --git a/client/src/components/History/Content/Dataset/DatasetDownload.vue b/client/src/components/History/Content/Dataset/DatasetDownload.vue
index 4ae94776374b..f98db7039d21 100644
--- a/client/src/components/History/Content/Dataset/DatasetDownload.vue
+++ b/client/src/components/History/Content/Dataset/DatasetDownload.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BDropdown, BDropdownItem } from "bootstrap-vue";
+import { BButton } from "bootstrap-vue";
 import { computed } from "vue";
 
 import type { HDADetailed } from "@/api";
 import { prependPath } from "@/utils/redirect";
 import { bytesToString } from "@/utils/utils";
 
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
+
 interface Props {
     item: HDADetailed;
 }
@@ -42,7 +45,7 @@ function onDownload(resource: string, extension = "") {
 </script>
 
 <template>
-    <BDropdown
+    <GDropdown
         v-if="hasMetaFiles"
         v-g-tooltip.hover
         dropup
@@ -58,19 +61,19 @@ function onDownload(resource: string, extension = "") {
             <FontAwesomeIcon :icon="faSave" />
         </template>
 
-        <BDropdownItem v-localize :href="downloadUrl" @click.prevent.stop="onDownload(downloadUrl)">
+        <GDropdownItem v-localize :href="downloadUrl" @click.prevent.stop="onDownload(downloadUrl)">
             Download Dataset
-        </BDropdownItem>
+        </GDropdownItem>
 
-        <BDropdownItem
+        <GDropdownItem
             v-for="(metaFile, index) of metaFiles"
             :key="index"
             :data-description="`download ${metaFile.file_type}`"
             :href="metaDownloadUrl + metaFile.file_type"
             @click.prevent.stop="onDownload(metaDownloadUrl, metaFile.file_type)">
             Download {{ metaFile.file_type }}
-        </BDropdownItem>
-    </BDropdown>
+        </GDropdownItem>
+    </GDropdown>
 
     <BButton
         v-else
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/DefaultOperations.vue b/client/src/components/History/CurrentHistory/HistoryOperations/DefaultOperations.vue
index 10b8ad7ec9cb..e72b820f9106 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/DefaultOperations.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/DefaultOperations.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faBurn, faCog, faEyeSlash, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BDropdown, BDropdownItem } from "bootstrap-vue";
 import { toRef } from "vue";
 
 import type { HistorySummaryExtended } from "@/api";
@@ -13,6 +12,9 @@ import {
 import { useConfirmDialog } from "@/composables/confirmDialog";
 import { useHistoryContentStats } from "@/composables/historyContentStats";
 
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
+
 interface Props {
     history: HistorySummaryExtended;
 }
@@ -73,7 +75,7 @@ async function runOperation(operation: () => Promise<unknown>) {
 
 <template>
     <section v-if="numItemsHidden || numItemsHidden || numItemsDeleted">
-        <BDropdown
+        <GDropdown
             v-g-tooltip.hover
             no-caret
             size="sm"
@@ -88,20 +90,20 @@ async function runOperation(operation: () => Promise<unknown>) {
                 <FontAwesomeIcon :icon="faCog" />
             </template>
 
-            <BDropdownItem v-if="numItemsHidden" @click="unhideAll">
+            <GDropdownItem v-if="numItemsHidden" @click="unhideAll">
                 <FontAwesomeIcon :icon="faEyeSlash" />
                 <span v-localize>Unhide All Hidden Content</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownItem v-if="numItemsHidden" @click="deleteAllHidden">
+            <GDropdownItem v-if="numItemsHidden" @click="deleteAllHidden">
                 <FontAwesomeIcon :icon="faTrash" />
                 <span v-localize>Delete All Hidden Content</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownItem v-if="numItemsDeleted" @click="purgeAllDeleted">
+            <GDropdownItem v-if="numItemsDeleted" @click="purgeAllDeleted">
                 <FontAwesomeIcon :icon="faBurn" />
                 <span v-localize>Purge All Deleted Content</span>
-            </BDropdownItem>
-        </BDropdown>
+            </GDropdownItem>
+        </GDropdown>
     </section>
 </template>
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
index b0bd3ed5c9db..c0ccc93c9634 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
@@ -1,6 +1,6 @@
 <template>
     <section v-if="hasSelection && !isMultiViewItem">
-        <b-dropdown text="Selection" size="sm" variant="primary" data-description="selected content menu" no-flip>
+        <GDropdown text="Selection" size="sm" variant="primary" data-description="selected content menu" no-flip>
             <template v-slot:button-content>
                 <span v-if="selectionMatchesQuery" data-test-id="all-filter-selected">
                     {{ localize("All") }} <b>{{ totalItemsInQuery }}</b> {{ localize("selected") }}
@@ -9,66 +9,63 @@
                     <b>{{ selectionSize }}</b> {{ localize("of") }} {{ totalItemsInQuery }} {{ localize("selected") }}
                 </span>
             </template>
-            <b-dropdown-text>
+            <GDropdownText>
                 <span data-description="selected count"
                     >{{ localize("With") }} {{ numSelected }} {{ localize("selected...") }}</span
                 >
-            </b-dropdown-text>
-            <b-dropdown-item v-if="canUnhideSelection" data-description="unhide option" @click="unhideSelected">
+            </GDropdownText>
+            <GDropdownItem v-if="canUnhideSelection" data-description="unhide option" @click="unhideSelected">
                 <span v-localize>Unhide</span>
-            </b-dropdown-item>
-            <b-dropdown-item v-if="canHideSelection" data-description="hide option" @click="hideSelected">
+            </GDropdownItem>
+            <GDropdownItem v-if="canHideSelection" data-description="hide option" @click="hideSelected">
                 <span v-localize>Hide</span>
-            </b-dropdown-item>
-            <b-dropdown-item v-if="canUndeleteSelection" data-description="undelete option" @click="undeleteSelected">
+            </GDropdownItem>
+            <GDropdownItem v-if="canUndeleteSelection" data-description="undelete option" @click="undeleteSelected">
                 <span v-localize>Undelete</span>
-            </b-dropdown-item>
-            <b-dropdown-item v-if="canDeleteSelection" data-description="delete option" @click="deleteSelected">
+            </GDropdownItem>
+            <GDropdownItem v-if="canDeleteSelection" data-description="delete option" @click="deleteSelected">
                 <span v-localize>Delete</span>
-            </b-dropdown-item>
-            <b-dropdown-item v-if="canPurgeSelection" data-description="purge option" @click="purgeSelected">
+            </GDropdownItem>
+            <GDropdownItem v-if="canPurgeSelection" data-description="purge option" @click="purgeSelected">
                 <span v-localize>Delete (permanently)</span>
-            </b-dropdown-item>
-            <b-dropdown-divider v-if="showBuildOptions" />
-            <b-dropdown-divider v-if="showBuildOptionForAll" />
-            <b-dropdown-item
-                v-if="showBuildOptionForAll"
-                data-description="build list all"
-                @click="buildDatasetListAll">
+            </GDropdownItem>
+            <GDropdownDivider v-if="showBuildOptions" />
+            <GDropdownDivider v-if="showBuildOptionForAll" />
+            <GDropdownItem v-if="showBuildOptionForAll" data-description="build list all" @click="buildDatasetListAll">
                 <span v-localize>Build Dataset List</span>
-            </b-dropdown-item>
-            <b-dropdown-divider />
-            <b-dropdown-item data-description="change database build" @click="showChangeDbKeyModal = true">
+            </GDropdownItem>
+            <GDropdownDivider />
+            <GDropdownItem data-description="change database build" @click="showChangeDbKeyModal = true">
                 <span v-localize>Change Database/Build</span>
-            </b-dropdown-item>
-            <b-dropdown-item
+            </GDropdownItem>
+            <GDropdownItem
                 v-if="isCeleryEnabled"
                 data-description="change data type"
                 @click="showChangeDatatypeModal = true">
                 <span v-localize>Change data type</span>
-            </b-dropdown-item>
-            <b-dropdown-item data-description="add tags" @click="showAddTagsModal = true">
+            </GDropdownItem>
+            <GDropdownItem data-description="add tags" @click="showAddTagsModal = true">
                 <span v-localize>Add tags</span>
-            </b-dropdown-item>
-            <b-dropdown-item data-description="remove tags" @click="showRemoveTagsModal = true">
+            </GDropdownItem>
+            <GDropdownItem data-description="remove tags" @click="showRemoveTagsModal = true">
                 <span v-localize>Remove tags</span>
-            </b-dropdown-item>
-            <b-dropdown-item
+            </GDropdownItem>
+            <GDropdownItem
                 v-if="isCeleryEnabled && hasSelectableObjectStores"
                 data-description="storage operation"
                 :disabled="isAnonymous"
                 :title="storageOperationTitle"
                 @click="openStorageOperationModal">
                 <span v-localize>Manage Storage Location</span>
-            </b-dropdown-item>
-            <b-dropdown-divider v-if="showBuildOptions" />
-            <b-dropdown-item v-if="showBuildOptions" data-description="auto build list" @click="listWizard(false)">
+            </GDropdownItem>
+            <GDropdownDivider v-if="showBuildOptions" />
+            <GDropdownItem v-if="showBuildOptions" data-description="auto build list" @click="listWizard(false)">
                 <span v-localize>Auto Build List</span>
-            </b-dropdown-item>
-            <b-dropdown-item v-if="showBuildOptions" data-description="advanced build list" @click="listWizard(true)">
+            </GDropdownItem>
+            <GDropdownItem v-if="showBuildOptions" data-description="advanced build list" @click="listWizard(true)">
                 <span v-localize>Advanced Build List</span>
-            </b-dropdown-item>
-        </b-dropdown>
+            </GDropdownItem>
+        </GDropdown>
 
         <GModal
             :show.sync="showChangeDbKeyModal"
@@ -177,6 +174,10 @@ import { useObjectStoreStore } from "@/stores/objectStoreStore";
 import { useUserStore } from "@/stores/userStore";
 
 import StorageOperationWizardModal from "./StorageOperationWizardModal.vue";
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownDivider from "@/components/BaseComponents/GDropdownDivider.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
+import GDropdownText from "@/components/BaseComponents/GDropdownText.vue";
 import GModal from "@/components/BaseComponents/GModal.vue";
 import GTip from "@/components/BaseComponents/GTip.vue";
 import CollectionCreatorIndex from "@/components/Collections/CollectionCreatorIndex.vue";
@@ -187,6 +188,10 @@ export default {
         CollectionCreatorIndex,
         DbKeyProvider,
         DatatypesProvider,
+        GDropdown,
+        GDropdownDivider,
+        GDropdownItem,
+        GDropdownText,
         GModal,
         GTip,
         SingleItemSelector,
diff --git a/client/src/components/History/HistoryOptions.vue b/client/src/components/History/HistoryOptions.vue
index acd41f4fbf5f..df6c0e1b344c 100644
--- a/client/src/components/History/HistoryOptions.vue
+++ b/client/src/components/History/HistoryOptions.vue
@@ -18,7 +18,7 @@ import {
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
-import { BDropdown, BDropdownDivider, BDropdownItem, BDropdownText, BFormCheckbox } from "bootstrap-vue";
+import { BFormCheckbox } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 import { useRouter } from "vue-router/composables";
@@ -31,6 +31,10 @@ import { useUserStore } from "@/stores/userStore";
 import localize from "@/utils/localization";
 import { rethrowSimple } from "@/utils/simple-error";
 
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownDivider from "@/components/BaseComponents/GDropdownDivider.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
+import GDropdownText from "@/components/BaseComponents/GDropdownText.vue";
 import GModal from "@/components/BaseComponents/GModal.vue";
 import CopyModal from "@/components/History/Modals/CopyModal.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -114,7 +118,7 @@ watch(
 
 <template>
     <div>
-        <BDropdown
+        <GDropdown
             v-g-tooltip.top.hover
             no-caret
             size="sm"
@@ -129,13 +133,13 @@ watch(
                 <span v-localize class="sr-only">History Options</span>
             </template>
 
-            <BDropdownText>
+            <GDropdownText>
                 <LoadingSpan v-if="historiesLoading" message="Fetching histories from server" />
                 <span v-else-if="!props.minimal" v-localize>You have {{ totalHistoryCount }} histories.</span>
                 <span v-else v-localize>Manage History</span>
-            </BDropdownText>
+            </GDropdownText>
 
-            <BDropdownItem
+            <GDropdownItem
                 v-if="!props.minimal"
                 data-description="switch to multi history view"
                 :disabled="isAnonymous"
@@ -143,120 +147,120 @@ watch(
                 to="/histories/view_multiple">
                 <FontAwesomeIcon fixed-width :icon="faColumns" />
                 <span v-localize>Show Histories Side-by-Side</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownDivider v-if="!props.minimal" />
+            <GDropdownDivider v-if="!props.minimal" />
 
-            <BDropdownText v-if="!canEditHistory" v-localize>
+            <GDropdownText v-if="!canEditHistory" v-localize>
                 This history has been
                 <span class="font-weight-bold"> {{ historyState }} </span>.
                 <span v-localize>Some actions might not be available.</span>
-            </BDropdownText>
+            </GDropdownText>
 
-            <BDropdownDivider v-if="!canEditHistory" />
+            <GDropdownDivider v-if="!canEditHistory" />
 
-            <BDropdownItem
+            <GDropdownItem
                 :disabled="!canEditHistory"
                 :title="localize('Resume all Paused Jobs in this History')"
                 @click="resumePausedJobs()">
                 <FontAwesomeIcon fixed-width :icon="faPlay" />
                 <span v-localize>Resume Paused Jobs</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownDivider />
+            <GDropdownDivider />
 
-            <BDropdownItem
+            <GDropdownItem
                 :disabled="isAnonymous"
                 :title="userTitle('Copy History to a New History')"
                 @click="showCopyModal = !showCopyModal">
                 <FontAwesomeIcon fixed-width :icon="faClone" />
                 <span v-localize>Copy History</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownItem
+            <GDropdownItem
                 data-description="copy datasets"
                 :disabled="isAnonymous"
                 :title="userTitle('Copy Datasets to Another History')"
                 @click="router.push('/datasets/copy')">
                 <FontAwesomeIcon fixed-width :icon="faCopy" />
                 <span v-localize>Copy Datasets</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownItem
+            <GDropdownItem
                 :disabled="!canEditHistory"
                 :title="localize(isDeletedNotPurged ? 'Permanently Delete History' : 'Delete History')"
                 @click="showDeleteModal = !showDeleteModal">
                 <FontAwesomeIcon fixed-width :icon="isDeletedNotPurged ? faBurn : faTrash" />
                 <span v-if="isDeletedNotPurged" v-localize>Permanently Delete History</span>
                 <span v-else v-localize>Delete History</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownItem
+            <GDropdownItem
                 :title="localize('Export references for all Tools used in this History')"
                 :to="`/histories/citations?id=${history.id}`">
                 <FontAwesomeIcon fixed-width :icon="faStream" />
                 <span v-localize>Export Tool References</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownItem
+            <GDropdownItem
                 data-description="export to file"
                 :disabled="history.purged"
                 :title="localize('Export and Download History as a File')"
                 :to="`/histories/${history.id}/export`">
                 <FontAwesomeIcon fixed-width :icon="faFileArchive" />
                 <span v-localize>Export History to File</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownItem
+            <GDropdownItem
                 :disabled="isAnonymous || history.archived || history.purged"
                 data-description="archive history"
                 :title="userTitle('Archive this History')"
                 :to="`/histories/${history.id}/archive`">
                 <FontAwesomeIcon fixed-width :icon="faArchive" />
                 <span v-localize>Archive History</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownItem
+            <GDropdownItem
                 :disabled="isAnonymous"
                 data-description="extract workflow"
                 :title="userTitle('Convert History to Workflow')"
                 :to="`/histories/${history.id}/extract_workflow`">
                 <FontAwesomeIcon fixed-width :icon="faFileExport" />
                 <span v-localize>Extract Workflow</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownItem
+            <GDropdownItem
                 :disabled="isAnonymous"
                 :title="userTitle('Display Workflow Invocations')"
                 :to="`/histories/${history.id}/invocations`">
                 <FontAwesomeIcon fixed-width :icon="faList" />
                 <span v-localize>Show Invocations</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownItem :title="localize('View History Graph')" :to="`/histories/${history.id}/graph`">
+            <GDropdownItem :title="localize('View History Graph')" :to="`/histories/${history.id}/graph`">
                 <FontAwesomeIcon fixed-width :icon="faBezierCurve" />
                 <span v-localize>Show History Graph</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownItem
+            <GDropdownItem
                 :disabled="isAnonymous || !canEditHistory"
                 :title="userTitle('View History Notebooks')"
                 :to="`/histories/${history.id}/pages`">
                 <FontAwesomeIcon fixed-width :icon="faBook" />
                 <span v-localize>Show History Notebooks</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownDivider />
+            <GDropdownDivider />
 
-            <BDropdownItem
+            <GDropdownItem
                 :disabled="isAnonymous || !canEditHistory"
                 data-description="share and manage access"
                 :title="userTitle('Share, Publish, or Set Permissions for this History')"
                 :to="`/histories/sharing?id=${history.id}`">
                 <FontAwesomeIcon fixed-width :icon="faUsersCog" />
                 <span v-localize>Share & Manage Access</span>
-            </BDropdownItem>
-        </BDropdown>
+            </GDropdownItem>
+        </GDropdown>
 
         <CopyModal :history="history" :show-modal.sync="showCopyModal" />
 
diff --git a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
index 24e9fc65e556..838e1af4a72c 100644
--- a/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
+++ b/client/src/components/Libraries/LibraryFolder/TopToolbar/FolderTopBar.vue
@@ -2,15 +2,7 @@
 import { faBook, faCaretDown, faDownload, faHome, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios from "axios";
-import {
-    BAlert,
-    BButton,
-    BDropdown,
-    BDropdownDivider,
-    BDropdownGroup,
-    BDropdownItem,
-    BFormCheckbox,
-} from "bootstrap-vue";
+import { BAlert, BButton, BFormCheckbox } from "bootstrap-vue";
 import { computed, reactive, ref } from "vue";
 
 import { GalaxyApi } from "@/api";
@@ -27,6 +19,10 @@ import { Toast } from "@/composables/toast";
 import { getAppRoot } from "@/onload";
 import { useUserStore } from "@/stores/userStore";
 
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownDivider from "@/components/BaseComponents/GDropdownDivider.vue";
+import GDropdownGroup from "@/components/BaseComponents/GDropdownGroup.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 import CollectionCreatorIndex from "@/components/Collections/CollectionCreatorIndex.vue";
 import FolderDetails from "@/components/Libraries/LibraryFolder/FolderDetails/FolderDetails.vue";
 import LibraryBreadcrumb from "@/components/Libraries/LibraryFolder/LibraryBreadcrumb.vue";
@@ -335,7 +331,7 @@ function onAddDatasetsDirectory(selectedDatasets: Record<string, string | boolea
                         Folder
                     </BButton>
 
-                    <BDropdown
+                    <GDropdown
                         v-if="props.canAddLibraryItem"
                         v-g-tooltip.top
                         right
@@ -347,40 +343,40 @@ function onAddDatasetsDirectory(selectedDatasets: Record<string, string | boolea
                             <FontAwesomeIcon :icon="faCaretDown" />
                         </template>
 
-                        <BDropdownItem @click="onAddDatasets('history')"> from History </BDropdownItem>
+                        <GDropdownItem @click="onAddDatasets('history')"> from History </GDropdownItem>
 
-                        <BDropdownItem v-if="userLibraryImportDirAvailable" @click="onAddDatasets('userdir')">
+                        <GDropdownItem v-if="userLibraryImportDirAvailable" @click="onAddDatasets('userdir')">
                             from User Directory
-                        </BDropdownItem>
+                        </GDropdownItem>
 
-                        <BDropdownDivider v-if="libraryImportDir || allowLibraryPathPaste" />
+                        <GDropdownDivider v-if="libraryImportDir || allowLibraryPathPaste" />
 
-                        <BDropdownGroup v-if="libraryImportDir || allowLibraryPathPaste" header="Admins Only">
-                            <BDropdownItem v-if="libraryImportDir" @click="onAddDatasets('importdir')">
+                        <GDropdownGroup v-if="libraryImportDir || allowLibraryPathPaste" header="Admins Only">
+                            <GDropdownItem v-if="libraryImportDir" @click="onAddDatasets('importdir')">
                                 from Import Directory
-                            </BDropdownItem>
+                            </GDropdownItem>
 
-                            <BDropdownItem v-if="allowLibraryPathPaste" @click="onAddDatasets('path')">
+                            <GDropdownItem v-if="allowLibraryPathPaste" @click="onAddDatasets('path')">
                                 from Path
-                            </BDropdownItem>
-                        </BDropdownGroup>
-                    </BDropdown>
+                            </GDropdownItem>
+                        </GDropdownGroup>
+                    </GDropdown>
 
-                    <BDropdown v-g-tooltip.top right no-caret class="add-to-history mr-1">
+                    <GDropdown v-g-tooltip.top right no-caret class="add-to-history mr-1">
                         <template v-slot:button-content>
                             <FontAwesomeIcon :icon="faBook" />
                             Add to History
                             <FontAwesomeIcon :icon="faCaretDown" />
                         </template>
 
-                        <BDropdownItem class="add-to-history-datasets" @click="importToHistoryModal(false)">
+                        <GDropdownItem class="add-to-history-datasets" @click="importToHistoryModal(false)">
                             as Datasets
-                        </BDropdownItem>
+                        </GDropdownItem>
 
-                        <BDropdownItem class="add-to-history-collection" @click="importToHistoryModal(true)">
+                        <GDropdownItem class="add-to-history-collection" @click="importToHistoryModal(true)">
                             as a Collection
-                        </BDropdownItem>
-                    </BDropdown>
+                        </GDropdownItem>
+                    </GDropdown>
 
                     <div
                         v-if="datasetManipulation"
diff --git a/client/src/components/Masthead/MastheadDropdown.vue b/client/src/components/Masthead/MastheadDropdown.vue
index 8a0c7c3700d6..f5be88f3ca2b 100644
--- a/client/src/components/Masthead/MastheadDropdown.vue
+++ b/client/src/components/Masthead/MastheadDropdown.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BDropdownItem, BNavItemDropdown } from "bootstrap-vue";
+import { BNavItemDropdown } from "bootstrap-vue";
 import { type PropType, ref } from "vue";
 
 import type { IconLike } from "@/components/icons/galaxyIcons";
 
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 import TextShort from "@/components/Common/TextShort.vue";
 
 const dropdown = ref(null);
@@ -47,7 +48,7 @@ defineProps({
             <TextShort :text="title ?? ''" />
         </template>
         <template>
-            <BDropdownItem
+            <GDropdownItem
                 v-for="(item, idx) in menu"
                 :key="idx"
                 :data-description="`${id} ${item.title.toLowerCase()}`"
@@ -55,7 +56,7 @@ defineProps({
                 @click="item.handler">
                 <FontAwesomeIcon v-if="item.icon" fixed-width :icon="item.icon" />
                 <span>{{ item.title }}</span>
-            </BDropdownItem>
+            </GDropdownItem>
         </template>
     </BNavItemDropdown>
 </template>
diff --git a/client/src/components/Panels/Menus/PanelViewMenu.vue b/client/src/components/Panels/Menus/PanelViewMenu.vue
index 279ff685a322..b7598528afb1 100644
--- a/client/src/components/Panels/Menus/PanelViewMenu.vue
+++ b/client/src/components/Panels/Menus/PanelViewMenu.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BDropdown, BDropdownDivider, BDropdownGroup } from "bootstrap-vue";
 import type { IconDefinition } from "font-awesome-6";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
@@ -12,6 +11,9 @@ import localize from "@/utils/localization";
 import { types_to_icons } from "../utilities";
 
 import PanelViewMenuItem from "./PanelViewMenuItem.vue";
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownDivider from "@/components/BaseComponents/GDropdownDivider.vue";
+import GDropdownGroup from "@/components/BaseComponents/GDropdownGroup.vue";
 import Heading from "@/components/Common/Heading.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -120,7 +122,7 @@ async function updatePanelView(panel: Panel) {
 </script>
 
 <template>
-    <BDropdown
+    <GDropdown
         v-g-tooltip.hover.top
         right
         block
@@ -162,7 +164,7 @@ async function updatePanelView(panel: Panel) {
             :panel-view="defaultPanelView"
             @onSelect="updatePanelView" />
 
-        <BDropdownGroup v-for="group in groupedPanelViews" :id="group.type" :key="group.type">
+        <GDropdownGroup v-for="group in groupedPanelViews" :id="group.type" :key="group.type">
             <template v-slot:header>
                 <small class="font-weight-bold">{{ group.title }}</small>
             </template>
@@ -172,16 +174,16 @@ async function updatePanelView(panel: Panel) {
                 :current-panel-view="currentPanelView"
                 :panel-view="panelView"
                 @onSelect="updatePanelView" />
-        </BDropdownGroup>
+        </GDropdownGroup>
 
-        <BDropdownDivider v-if="ungroupedPanelViews.length > 0" />
+        <GDropdownDivider v-if="ungroupedPanelViews.length > 0" />
         <PanelViewMenuItem
             v-for="(panelView, key) in ungroupedPanelViews"
             :key="key"
             :current-panel-view="currentPanelView"
             :panel-view="panelView"
             @onSelect="updatePanelView" />
-    </BDropdown>
+    </GDropdown>
 </template>
 
 <style scoped lang="scss">
diff --git a/client/src/components/Panels/Menus/PanelViewMenuItem.vue b/client/src/components/Panels/Menus/PanelViewMenuItem.vue
index 184f52ff367f..0f78b36094f9 100644
--- a/client/src/components/Panels/Menus/PanelViewMenuItem.vue
+++ b/client/src/components/Panels/Menus/PanelViewMenuItem.vue
@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { faCheck, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BDropdownItem } from "bootstrap-vue";
 import { computed } from "vue";
 
 import type { Panel } from "@/stores/toolStore";
 
 import { types_to_icons } from "../utilities";
 
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
+
 const props = defineProps<{
     currentPanelView: string;
     panelView: Panel;
@@ -26,7 +27,7 @@ const isSelected = computed(() => props.currentPanelView === props.panelView.id)
 </script>
 
 <template>
-    <BDropdownItem
+    <GDropdownItem
         class="ml-1"
         :title="props.panelView.description"
         :data-panel-id="panelView.id"
@@ -40,5 +41,5 @@ const isSelected = computed(() => props.currentPanelView === props.panelView.id)
             class="ml-1"
             data-description="panel view item icon"
             fixed-width />
-    </BDropdownItem>
+    </GDropdownItem>
 </template>
diff --git a/client/src/components/Tool/Buttons/ToolOptionsButton.vue b/client/src/components/Tool/Buttons/ToolOptionsButton.vue
index 9bc6a0a31992..1c9c652c94ee 100644
--- a/client/src/components/Tool/Buttons/ToolOptionsButton.vue
+++ b/client/src/components/Tool/Buttons/ToolOptionsButton.vue
@@ -2,7 +2,6 @@
 import { faCopy, faEye } from "@fortawesome/free-regular-svg-icons";
 import { faCaretDown, faDownload, faExternalLinkAlt, faLink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BDropdown, BDropdownItem } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
@@ -16,6 +15,8 @@ import { copyId, copyLink, downloadTool, openLink } from "../utilities";
 
 import ToolTourGeneratorItem from "./ToolTourGeneratorItem.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 import GModal from "@/components/BaseComponents/GModal.vue";
 import ToolSource from "@/components/Tool/ToolSource.vue";
 
@@ -80,7 +81,7 @@ loadToolMenuWebhooks();
 
 <template>
     <div>
-        <BDropdown
+        <GDropdown
             no-caret
             right
             role="button"
@@ -96,32 +97,32 @@ loadToolMenuWebhooks();
                 </GButton>
             </template>
 
-            <BDropdownItem @click="onCopyLink">
+            <GDropdownItem @click="onCopyLink">
                 <FontAwesomeIcon :icon="faLink" /><span v-localize>Copy Link</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownItem @click="onCopyId">
+            <GDropdownItem @click="onCopyId">
                 <FontAwesomeIcon :icon="faCopy" /><span v-localize>Copy Tool ID</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownItem v-if="showDownload" @click="onDownload">
+            <GDropdownItem v-if="showDownload" @click="onDownload">
                 <FontAwesomeIcon :icon="faDownload" /><span v-localize>Download</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownItem v-if="config.enable_tool_source_display || isAdmin" @click="showToolSource = true">
+            <GDropdownItem v-if="config.enable_tool_source_display || isAdmin" @click="showToolSource = true">
                 <FontAwesomeIcon :icon="faEye" /><span v-localize>View Tool source</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
-            <BDropdownItem v-if="showLink" @click="onLink">
+            <GDropdownItem v-if="showLink" @click="onLink">
                 <FontAwesomeIcon :icon="faExternalLinkAlt" /><span v-localize>See in Tool Shed</span>
-            </BDropdownItem>
+            </GDropdownItem>
 
             <ToolTourGeneratorItem v-if="props.allowGeneratedTours" :tool-id="props.id" :tool-version="props.version" />
 
-            <BDropdownItem v-for="w of webhookDetails" :key="w.title" @click="w.onclick">
+            <GDropdownItem v-for="w of webhookDetails" :key="w.title" @click="w.onclick">
                 <span :class="w.icon" />{{ localize(w.title) }}
-            </BDropdownItem>
-        </BDropdown>
+            </GDropdownItem>
+        </GDropdown>
 
         <GModal :show.sync="showToolSource" fullscreen :title="`Tool Source for ${id}`">
             <ToolSource v-if="showToolSource" :tool-id="id" :tool-uuid="toolUuid || undefined" />
diff --git a/client/src/components/Tool/Buttons/ToolTourGeneratorItem.vue b/client/src/components/Tool/Buttons/ToolTourGeneratorItem.vue
index bc37bb4caa4a..ce352d9a0f5c 100644
--- a/client/src/components/Tool/Buttons/ToolTourGeneratorItem.vue
+++ b/client/src/components/Tool/Buttons/ToolTourGeneratorItem.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { faPuzzlePiece } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BDropdownItem } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -13,6 +12,7 @@ import { useHistoryStore } from "@/stores/historyStore";
 import { useTourStore } from "@/stores/tourStore";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
 const props = defineProps<{
@@ -112,7 +112,7 @@ function reset() {
 </script>
 
 <template>
-    <BDropdownItem
+    <GDropdownItem
         v-if="!currentTour?.id"
         data-description="click to generate tour"
         :disabled="generatingTour"
@@ -121,5 +121,5 @@ function reset() {
             <FontAwesomeIcon :icon="faPuzzlePiece" /><span v-localize>Generate Tour</span>
         </span>
         <LoadingSpan v-else message="Generating Tour" />
-    </BDropdownItem>
+    </GDropdownItem>
 </template>
diff --git a/client/src/components/Tool/Buttons/ToolVersionsButton.vue b/client/src/components/Tool/Buttons/ToolVersionsButton.vue
index e4e760d6b88f..fccd565fd918 100644
--- a/client/src/components/Tool/Buttons/ToolVersionsButton.vue
+++ b/client/src/components/Tool/Buttons/ToolVersionsButton.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { faCheck, faCube, faCubes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BDropdown, BDropdownItem } from "bootstrap-vue";
 import { computed } from "vue";
 
 import GButton from "@/components/BaseComponents/GButton.vue";
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 
 interface Props {
     version: string;
@@ -21,7 +22,7 @@ const availableVersions = computed(() => [...props.versions].reverse());
 </script>
 
 <template>
-    <BDropdown
+    <GDropdown
         no-caret
         right
         role="button"
@@ -35,7 +36,7 @@ const availableVersions = computed(() => [...props.versions].reverse());
                 <FontAwesomeIcon :icon="faCubes" />
             </GButton>
         </template>
-        <BDropdownItem
+        <GDropdownItem
             v-for="v of availableVersions"
             :key="v"
             :active="v === props.version"
@@ -44,6 +45,6 @@ const availableVersions = computed(() => [...props.versions].reverse());
                 <FontAwesomeIcon :icon="faCube" /> <span v-localize>Switch to</span> {{ v }}
             </span>
             <span v-else> <FontAwesomeIcon :icon="faCheck" /> <span v-localize>Selected</span> {{ v }} </span>
-        </BDropdownItem>
-    </BDropdown>
+        </GDropdownItem>
+    </GDropdown>
 </template>
diff --git a/client/src/components/ToolsList/ToolOntologies.vue b/client/src/components/ToolsList/ToolOntologies.vue
index 12703f274839..83b2f416ad35 100644
--- a/client/src/components/ToolsList/ToolOntologies.vue
+++ b/client/src/components/ToolsList/ToolOntologies.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faExternalLinkAlt, faFilter, faSortAlphaDown, faSortAlphaUp } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BBadge, BDropdown, BDropdownItem } from "bootstrap-vue";
+import { BAlert, BBadge } from "bootstrap-vue";
 import { computed, ref, watch } from "vue";
 
 import { type ToolSection, useToolStore } from "@/stores/toolStore";
@@ -13,6 +13,8 @@ import GFormInput from "../BaseComponents/Form/GFormInput.vue";
 import GLink from "../BaseComponents/GLink.vue";
 import ToolOntologyCard from "./ToolOntologyCard.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 import BreadcrumbHeading from "@/components/Common/BreadcrumbHeading.vue";
 import HelpText from "@/components/Help/HelpText.vue";
 import ScrollList from "@/components/ScrollList/ScrollList.vue";
@@ -183,7 +185,7 @@ watch([ontologiesFilter, sortOrder, showing], async () => {
                         <HelpText uri="galaxy.tools.ontologies.operation" text="What is an EDAM Operation?" />
                     </BBadge>
 
-                    <BDropdown
+                    <GDropdown
                         block
                         :disabled="loading"
                         variant="link"
@@ -199,10 +201,10 @@ watch([ontologiesFilter, sortOrder, showing], async () => {
                             <span v-else>Showing Operations Only</span>
                         </template>
 
-                        <BDropdownItem @click="showing = 'all'">Show All Ontologies</BDropdownItem>
-                        <BDropdownItem @click="showing = 'operations'">Show Operations Only</BDropdownItem>
-                        <BDropdownItem @click="showing = 'topics'">Show Topics Only</BDropdownItem>
-                    </BDropdown>
+                        <GDropdownItem @click="showing = 'all'">Show All Ontologies</GDropdownItem>
+                        <GDropdownItem @click="showing = 'operations'">Show Operations Only</GDropdownItem>
+                        <GDropdownItem @click="showing = 'topics'">Show Topics Only</GDropdownItem>
+                    </GDropdown>
 
                     <GButton v-if="!validFilter" color="blue" outline @click="changeSort">
                         <FontAwesomeIcon :icon="sortOrder === 'asc' ? faSortAlphaDown : faSortAlphaUp" />
diff --git a/client/src/components/ToolsList/ToolsListSectionFilters.vue b/client/src/components/ToolsList/ToolsListSectionFilters.vue
index eb7eb38e7fad..dd259ae2a729 100644
--- a/client/src/components/ToolsList/ToolsListSectionFilters.vue
+++ b/client/src/components/ToolsList/ToolsListSectionFilters.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faSitemap, faTimes, type IconDefinition } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BDropdown, BDropdownDivider, BDropdownGroup, BDropdownItem, BDropdownText, BFormInput } from "bootstrap-vue";
+import { BFormInput } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 
@@ -12,6 +12,11 @@ import { types_to_icons } from "../Panels/utilities";
 
 import GButton from "../BaseComponents/GButton.vue";
 import ToolOntologyCard from "./ToolOntologyCard.vue";
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownDivider from "@/components/BaseComponents/GDropdownDivider.vue";
+import GDropdownGroup from "@/components/BaseComponents/GDropdownGroup.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
+import GDropdownText from "@/components/BaseComponents/GDropdownText.vue";
 
 const props = defineProps<{
     /** The `Filtering` class (ToolFilters). */
@@ -76,7 +81,7 @@ function searchWithinSections(sections: ToolSection[], query: string) {
     <div class="d-flex flex-column flex-gapy-1">
         <div class="d-flex justify-content-between align-items-center">
             <div class="d-flex flex-gapx-1">
-                <BDropdown
+                <GDropdown
                     block
                     :disabled="props.disabled"
                     variant="link"
@@ -94,17 +99,17 @@ function searchWithinSections(sections: ToolSection[], query: string) {
                         <i v-else> Select an ontology to filter by </i>
                     </template>
 
-                    <BDropdownGroup
+                    <GDropdownGroup
                         id="searchable-sections"
                         class="sections-select-list"
                         header-classes="search-header">
                         <template v-slot:header>
-                            <BDropdownText>
+                            <GDropdownText>
                                 <BFormInput v-model="ontologiesFilter" type="text" placeholder="Filter ontologies..." />
-                            </BDropdownText>
+                            </GDropdownText>
                         </template>
 
-                        <BDropdownGroup
+                        <GDropdownGroup
                             v-if="Object.keys(edamOperations).length"
                             id="edam-operations"
                             class="unselectable">
@@ -116,19 +121,19 @@ function searchWithinSections(sections: ToolSection[], query: string) {
                                     size="sm" />
                                 <small class="font-weight-bold">{{ panels["ontology:edam_operations"]?.name }}</small>
                             </template>
-                            <BDropdownItem
+                            <GDropdownItem
                                 v-for="ont in edamOperations"
                                 :key="ont.id"
                                 :title="ont.description"
                                 :active="selectedOntology?.id === ont.id"
                                 @click="applyQuotedFilter('ontology', ont.id)">
                                 <span v-localize>{{ ont.name }}</span>
-                            </BDropdownItem>
-                        </BDropdownGroup>
+                            </GDropdownItem>
+                        </GDropdownGroup>
 
-                        <BDropdownDivider />
+                        <GDropdownDivider />
 
-                        <BDropdownGroup v-if="Object.keys(edamTopics).length" id="edam-topics" class="unselectable">
+                        <GDropdownGroup v-if="Object.keys(edamTopics).length" id="edam-topics" class="unselectable">
                             <template v-slot:header>
                                 <FontAwesomeIcon
                                     v-if="getPanelIcon('ontology:edam_topics')"
@@ -137,17 +142,17 @@ function searchWithinSections(sections: ToolSection[], query: string) {
                                     size="sm" />
                                 <small class="font-weight-bold">{{ panels["ontology:edam_topics"]?.name }}</small>
                             </template>
-                            <BDropdownItem
+                            <GDropdownItem
                                 v-for="ont in edamTopics"
                                 :key="ont.id"
                                 :title="ont.description"
                                 :active="selectedOntology?.id === ont.id"
                                 @click="applyQuotedFilter('ontology', ont.id)">
                                 <span v-localize>{{ ont.name }}</span>
-                            </BDropdownItem>
-                        </BDropdownGroup>
-                    </BDropdownGroup>
-                </BDropdown>
+                            </GDropdownItem>
+                        </GDropdownGroup>
+                    </GDropdownGroup>
+                </GDropdown>
 
                 <GButton
                     v-if="selectedOntology"
diff --git a/client/src/components/Visualizations/VisualizationExamples.vue b/client/src/components/Visualizations/VisualizationExamples.vue
index 4941dd2056dc..1d5162a6f3b5 100644
--- a/client/src/components/Visualizations/VisualizationExamples.vue
+++ b/client/src/components/Visualizations/VisualizationExamples.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import { faFileUpload, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BDropdown, BDropdownItem, BDropdownText } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 
 import { useToast } from "@/composables/toast";
 import { useHistoryStore } from "@/stores/historyStore";
 import { createUrlUploadItem, uploadDatasets } from "@/utils/upload";
 
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
+import GDropdownText from "@/components/BaseComponents/GDropdownText.vue";
+
 const { currentHistoryId } = storeToRefs(useHistoryStore());
 
 const toast = useToast();
@@ -42,7 +45,7 @@ function onSubmit(name: string, url: string, ftype?: string) {
     <div v-if="!currentHistoryId" class="d-flex align-items-center h-100">
         <FontAwesomeIcon :icon="faSpinner" spin />
     </div>
-    <BDropdown
+    <GDropdown
         v-else-if="urlData && urlData.length > 0"
         v-g-tooltip.hover
         no-caret
@@ -55,14 +58,14 @@ function onSubmit(name: string, url: string, ftype?: string) {
         <template v-slot:button-content>
             <FontAwesomeIcon :icon="faFileUpload" />
         </template>
-        <BDropdownText>
+        <GDropdownText>
             <small class="text-primary text-uppercase">Upload Examples</small>
-        </BDropdownText>
-        <BDropdownItem v-for="ud of urlData" :key="ud.url" @click="() => onSubmit(ud.name, ud.url, ud.ftype)">
+        </GDropdownText>
+        <GDropdownItem v-for="ud of urlData" :key="ud.url" @click="() => onSubmit(ud.name, ud.url, ud.ftype)">
             <span>
                 <FontAwesomeIcon :icon="faFileUpload" />
                 <span v-localize>{{ ud.name }}</span>
             </span>
-        </BDropdownItem>
-    </BDropdown>
+        </GDropdownItem>
+    </GDropdown>
 </template>
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 3d528dd6322c..48006d8603a1 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -13,7 +13,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { until, whenever } from "@vueuse/core";
 import { logicAnd, logicNot, logicOr } from "@vueuse/math";
-import { BDropdown, BDropdownDivider, BDropdownItem, BDropdownText, BFormTextarea } from "bootstrap-vue";
+import { BFormTextarea } from "bootstrap-vue";
 import type { ZoomTransform } from "d3-zoom";
 import isEqual from "lodash.isequal";
 import { storeToRefs } from "pinia";
@@ -62,6 +62,10 @@ import GFormLabel from "@/components/BaseComponents/Form/GFormLabel.vue";
 import GAlert from "@/components/BaseComponents/GAlert.vue";
 import GButton from "@/components/BaseComponents/GButton.vue";
 import GButtonGroup from "@/components/BaseComponents/GButtonGroup.vue";
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownDivider from "@/components/BaseComponents/GDropdownDivider.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
+import GDropdownText from "@/components/BaseComponents/GDropdownText.vue";
 import GModal from "@/components/BaseComponents/GModal.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 import MarkdownEditor from "@/components/Markdown/MarkdownEditor.vue";
@@ -1452,7 +1456,7 @@ initializeWorkflowEditor();
                     </span>
 
                     <div class="d-flex align-items-center flex-gapx-1">
-                        <BDropdown
+                        <GDropdown
                             v-if="credentialSteps.length > 0"
                             no-caret
                             right
@@ -1463,13 +1467,13 @@ initializeWorkflowEditor();
                                 <FontAwesomeIcon :icon="faKey" fixed-width />
                             </template>
 
-                            <BDropdownText style="min-width: 25rem">
+                            <GDropdownText style="min-width: 25rem">
                                 This workflow contains the following steps that require credentials:
-                            </BDropdownText>
+                            </GDropdownText>
 
-                            <BDropdownDivider />
+                            <GDropdownDivider />
 
-                            <BDropdownItem
+                            <GDropdownItem
                                 v-for="cs in credentialSteps"
                                 :key="cs.id"
                                 title="Click to go to step"
@@ -1477,8 +1481,8 @@ initializeWorkflowEditor();
                                 @click="onToolClick(cs.id)">
                                 <FontAwesomeIcon :icon="faWrench" fixed-width />
                                 {{ cs.id + 1 }}: {{ cs.label ?? cs.name }}
-                            </BDropdownItem>
-                        </BDropdown>
+                            </GDropdownItem>
+                        </GDropdown>
 
                         <GButtonGroup>
                             <GButton
diff --git a/client/src/components/Workflow/Editor/NodeInspector.vue b/client/src/components/Workflow/Editor/NodeInspector.vue
index 328ca4029c9f..ac7a82f956c9 100644
--- a/client/src/components/Workflow/Editor/NodeInspector.vue
+++ b/client/src/components/Workflow/Editor/NodeInspector.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faCog, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton, BButtonGroup, BDropdown, BDropdownForm, BDropdownItemButton, BFormCheckbox } from "bootstrap-vue";
+import { BButton, BButtonGroup, BFormCheckbox } from "bootstrap-vue";
 //@ts-ignore deprecated package without types (vue 2, remove this comment on vue 3 migration)
 import { ArrowLeftFromLine, ArrowRightToLine } from "lucide-vue";
 import { computed } from "vue";
@@ -11,6 +11,9 @@ import type { PostJobActions, Step } from "@/stores/workflowStepStore";
 
 import FormDefault from "./Forms/FormDefault.vue";
 import FormTool from "./Forms/FormTool.vue";
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownForm from "@/components/BaseComponents/GDropdownForm.vue";
+import GDropdownItemButton from "@/components/BaseComponents/GDropdownItemButton.vue";
 import DraggableSeparator from "@/components/Common/DraggableSeparator.vue";
 import Heading from "@/components/Common/Heading.vue";
 import IdleLoad from "@/components/Common/IdleLoad.vue";
@@ -88,21 +91,21 @@ function updateStored(v: boolean) {
                     <ArrowRightToLine absolute-stroke-width :size="17" />
                 </BButton>
 
-                <BDropdown class="dropdown" toggle-class="heading-button" variant="link" size="md" no-caret>
+                <GDropdown class="dropdown" toggle-class="heading-button" variant="link" size="md" no-caret>
                     <template v-slot:button-content>
                         <FontAwesomeIcon :icon="faCog" fixed-width />
                     </template>
 
-                    <BDropdownForm form-class="px-2" title="remember size for all steps using this tool">
+                    <GDropdownForm form-class="px-2" title="remember size for all steps using this tool">
                         <BFormCheckbox :checked="inspectorStore.isStored(props.step)" @input="updateStored">
                             remember size
                         </BFormCheckbox>
-                    </BDropdownForm>
+                    </GDropdownForm>
 
-                    <BDropdownItemButton @click="inspectorStore.clearAllStored">
+                    <GDropdownItemButton @click="inspectorStore.clearAllStored">
                         reset all stored sizes
-                    </BDropdownItemButton>
-                </BDropdown>
+                    </GDropdownItemButton>
+                </GDropdown>
 
                 <BButton class="heading-button" variant="link" size="md" title="close" @click="close">
                     <FontAwesomeIcon :icon="faTimes" fixed-width />
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index 6205b922bc0a..098cfa1a70f6 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BAlert, BButtonGroup, BCol, BContainer, BDropdown, BDropdownItem, BRow } from "bootstrap-vue";
+import { BAlert, BButtonGroup, BCol, BContainer, BRow } from "bootstrap-vue";
 import type { VisualizationSpec } from "vega-embed";
 import type { ComputedRef } from "vue";
 import { computed, ref, watch } from "vue";
@@ -10,6 +10,8 @@ import { useInvocationStore } from "@/stores/invocationStore";
 import { capitalizeFirstLetter } from "@/utils/strings";
 
 import LoadingSpan from "../LoadingSpan.vue";
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 import HelpText from "@/components/Help/HelpText.vue";
 
 const VegaWrapper = () => import("@/components/Common/VegaWrapper.vue");
@@ -407,21 +409,21 @@ const groupByInTitles = computed(() => {
         <BContainer>
             <BRow align-h="end" class="mb-2">
                 <BButtonGroup>
-                    <BDropdown variant="outline-primary" size="sm" right :text="'Timing: ' + timingInTitles">
-                        <BDropdownItem @click="timing = 'seconds'">
+                    <GDropdown variant="outline-primary" size="sm" right :text="'Timing: ' + timingInTitles">
+                        <GDropdownItem @click="timing = 'seconds'">
                             {{ capitalizeFirstLetter("seconds") }}
-                        </BDropdownItem>
-                        <BDropdownItem @click="timing = 'minutes'">
+                        </GDropdownItem>
+                        <GDropdownItem @click="timing = 'minutes'">
                             {{ capitalizeFirstLetter("minutes") }}
-                        </BDropdownItem>
-                        <BDropdownItem @click="timing = 'hours'">
+                        </GDropdownItem>
+                        <GDropdownItem @click="timing = 'hours'">
                             {{ capitalizeFirstLetter("hours") }}
-                        </BDropdownItem>
-                    </BDropdown>
-                    <BDropdown variant="outline-primary" size="sm" right :text="'Group By: ' + groupByInTitles">
-                        <BDropdownItem @click="groupBy = 'tool_id'">Tool</BDropdownItem>
-                        <BDropdownItem @click="groupBy = 'step_id'">Workflow Step</BDropdownItem>
-                    </BDropdown>
+                        </GDropdownItem>
+                    </GDropdown>
+                    <GDropdown variant="outline-primary" size="sm" right :text="'Group By: ' + groupByInTitles">
+                        <GDropdownItem @click="groupBy = 'tool_id'">Tool</GDropdownItem>
+                        <GDropdownItem @click="groupBy = 'step_id'">Workflow Step</GDropdownItem>
+                    </GDropdown>
                 </BButtonGroup>
             </BRow>
             <BRow>

From ec556d484082d07e3b18f33933eca631b7245294 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sat, 28 Feb 2026 16:33:46 -0500
Subject: [PATCH 02/11] Fix tests for GDropdown migration

Update HistoryOptions to use findAllComponents(GDropdownItem) with
props() checks instead of CSS stub selectors. Update VisualizationExamples
to import GDropdown/GDropdownItem instead of BDropdown/BDropdownItem and
click button instead of anchor. Add router-link stub to MultipleView test.
Update ToolTourGeneratorItem to check disabled attribute instead of
aria-disabled since GDropdownItem uses native button disabled.
---
 .../components/History/HistoryOptions.test.ts | 24 ++++++++++---------
 .../History/Multiple/MultipleView.test.js     |  1 +
 .../Buttons/ToolTourGeneratorItem.test.ts     |  6 ++---
 .../VisualizationExamples.test.js             | 17 ++++++-------
 4 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/client/src/components/History/HistoryOptions.test.ts b/client/src/components/History/HistoryOptions.test.ts
index 6efb267bda3d..d5a05e8fc814 100644
--- a/client/src/components/History/HistoryOptions.test.ts
+++ b/client/src/components/History/HistoryOptions.test.ts
@@ -5,6 +5,7 @@ import flushPromises from "flush-promises";
 import { createPinia } from "pinia";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 import { useHistoryStore } from "@/stores/historyStore";
 import { useUserStore } from "@/stores/userStore";
 
@@ -82,8 +83,7 @@ describe("History Navigation", () => {
             },
         );
 
-        const dropDown = wrapper.find("*[data-description='history options']");
-        const optionElements = dropDown.findAll("bdropdownitem-stub");
+        const optionElements = wrapper.findAllComponents(GDropdownItem);
         const optionTexts = optionElements.wrappers.map((el) => el.text());
 
         expect(optionTexts).toStrictEqual(expectedOptions);
@@ -95,13 +95,15 @@ describe("History Navigation", () => {
             histories: [],
         });
 
-        const dropDown = wrapper.find("*[data-description='history options']");
-        const enabledOptionElements = dropDown.findAll("bdropdownitem-stub:not([disabled])");
-        const enabledOptionTexts = enabledOptionElements.wrappers.map((el) => el.text());
+        const allItems = wrapper.findAllComponents(GDropdownItem);
+        const enabledOptionTexts = allItems.wrappers
+            .filter((el) => !el.props("disabled"))
+            .map((el) => el.text());
         expect(enabledOptionTexts).toStrictEqual(anonymousOptions);
 
-        const disabledOptionElements = dropDown.findAll("bdropdownitem-stub[disabled]");
-        const disabledOptionTexts = disabledOptionElements.wrappers.map((el) => el.text());
+        const disabledOptionTexts = allItems.wrappers
+            .filter((el) => el.props("disabled"))
+            .map((el) => el.text());
         expect(disabledOptionTexts).toStrictEqual(anonymousDisabledOptions);
     });
 
@@ -111,11 +113,11 @@ describe("History Navigation", () => {
             histories: [],
         });
 
-        const dropDown = wrapper.find("*[data-description='history options']");
-        const disabledOptionElements = dropDown.findAll("bdropdownitem-stub[disabled]");
+        const allItems = wrapper.findAllComponents(GDropdownItem);
+        const disabledItems = allItems.wrappers.filter((el) => el.props("disabled"));
 
-        disabledOptionElements.wrappers.forEach((option) => {
-            expect((option.attributes("title") as string).toLowerCase()).toContain("log in");
+        disabledItems.forEach((option) => {
+            expect((option.props("title") as string).toLowerCase()).toContain("log in");
         });
     });
 
diff --git a/client/src/components/History/Multiple/MultipleView.test.js b/client/src/components/History/Multiple/MultipleView.test.js
index d5d3a711695d..110c6cac905b 100644
--- a/client/src/components/History/Multiple/MultipleView.test.js
+++ b/client/src/components/History/Multiple/MultipleView.test.js
@@ -59,6 +59,7 @@ describe("MultipleView", () => {
             stubs: {
                 HistoryPanel: true,
                 icon: { template: "<div></div>" },
+                "router-link": { template: "<a><slot /></a>", props: ["to"] },
             },
             localVue: getLocalVue(),
         });
diff --git a/client/src/components/Tool/Buttons/ToolTourGeneratorItem.test.ts b/client/src/components/Tool/Buttons/ToolTourGeneratorItem.test.ts
index 3a2d0fe10878..62179e5311f9 100644
--- a/client/src/components/Tool/Buttons/ToolTourGeneratorItem.test.ts
+++ b/client/src/components/Tool/Buttons/ToolTourGeneratorItem.test.ts
@@ -219,7 +219,7 @@ describe("Tool Generated Tour Dropdown Item", () => {
     /** Confirms the tour is _(still)_ generating, given that the dropdown item is disabled
      * and the tour store not yet updated. */
     function tourIsGenerating(dropdownItem: Wrapper<Vue>) {
-        expect(dropdownItem.attributes("aria-disabled")).toBe("true");
+        expect(dropdownItem.attributes("disabled")).toBe("disabled");
         expect(setTourMock).toHaveBeenCalledTimes(0);
     }
 
@@ -227,7 +227,7 @@ describe("Tool Generated Tour Dropdown Item", () => {
     function tourHasGenerated(dropdownItem: Wrapper<Vue>) {
         // The second toast confirms the tour is ready
         expect(toastMock).toHaveBeenCalledWith("You can now start the tour", "success");
-        expect(dropdownItem.attributes("aria-disabled")).toBeUndefined();
+        expect(dropdownItem.attributes("disabled")).toBeUndefined();
 
         // The tour is now in the store, with the expected key
         expect(setTourMock).toHaveBeenCalledWith(`tool-generated-${TEST_TOOL_ID}-${TEST_TOOL_VERSION}`);
@@ -239,7 +239,7 @@ describe("Tool Generated Tour Dropdown Item", () => {
     function tourGenerationFailedWith(dropdownItem: Wrapper<Vue>, message: string) {
         // The second toast confirms the tour generation failed
         expect(toastMock).toHaveBeenCalledWith(message, "error");
-        expect(dropdownItem.attributes("aria-disabled")).toBeUndefined();
+        expect(dropdownItem.attributes("disabled")).toBeUndefined();
         expect(setTourMock).toHaveBeenCalledTimes(0);
     }
 });
diff --git a/client/src/components/Visualizations/VisualizationExamples.test.js b/client/src/components/Visualizations/VisualizationExamples.test.js
index bcc096458a09..96eb0bafcbb7 100644
--- a/client/src/components/Visualizations/VisualizationExamples.test.js
+++ b/client/src/components/Visualizations/VisualizationExamples.test.js
@@ -1,6 +1,7 @@
 import { getLocalVue } from "@tests/vitest/helpers";
 import { mount } from "@vue/test-utils";
-import { BDropdown, BDropdownItem } from "bootstrap-vue";
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 import { createPinia, defineStore, setActivePinia } from "pinia";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ref } from "vue";
@@ -67,7 +68,7 @@ describe("UploadExamples.vue", () => {
             localVue,
             propsData: { urlData },
         });
-        const items = wrapper.findAllComponents(BDropdownItem);
+        const items = wrapper.findAllComponents(GDropdownItem);
         expect(items.length).toBe(urlData.length);
         expect(wrapper.text()).toContain("Example 1");
         expect(wrapper.text()).toContain("Example 2");
@@ -78,8 +79,8 @@ describe("UploadExamples.vue", () => {
             localVue,
             propsData: { urlData },
         });
-        const items = wrapper.findAllComponents(BDropdownItem);
-        await items.at(0).find("a").trigger("click");
+        const items = wrapper.findAllComponents(GDropdownItem);
+        await items.at(0).find("button").trigger("click");
         expect(createUrlUploadItem).toHaveBeenCalledWith(urlData[0].url, "fake-history-id", {
             name: "Example 1",
             ext: urlData[0].ftype,
@@ -108,8 +109,8 @@ describe("UploadExamples.vue", () => {
             localVue,
             propsData: { urlData },
         });
-        const items = wrapper.findAllComponents(BDropdownItem);
-        await items.at(1).find("a").trigger("click");
+        const items = wrapper.findAllComponents(GDropdownItem);
+        await items.at(1).find("button").trigger("click");
         vi.mocked(uploadDatasets).mock.calls[0][1].error();
         expect(toastError).toHaveBeenCalledWith("Uploading the sample dataset 'Example 2' has failed.");
     });
@@ -119,7 +120,7 @@ describe("UploadExamples.vue", () => {
             localVue,
             propsData: {},
         });
-        expect(wrapper.findComponent(BDropdown).exists()).toBe(false);
+        expect(wrapper.findComponent(GDropdown).exists()).toBe(false);
     });
 
     it("reacts to history ID becoming available", async () => {
@@ -131,7 +132,7 @@ describe("UploadExamples.vue", () => {
         expect(wrapper.find("svg").exists()).toBe(true);
         mockedStore.currentHistoryId = ref("new-history-id");
         await wrapper.vm.$nextTick();
-        const items = wrapper.findAllComponents(BDropdownItem);
+        const items = wrapper.findAllComponents(GDropdownItem);
         expect(items.length).toBe(urlData.length);
     });
 });

From 65c8855082327c924f89c1405c6d7907b6d4ea05 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sun, 1 Mar 2026 19:08:50 -0500
Subject: [PATCH 03/11] Fix import order and line length in GDropdown tests

---
 client/src/components/History/HistoryOptions.test.ts   | 10 +++-------
 .../Visualizations/VisualizationExamples.test.js       |  4 ++--
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/client/src/components/History/HistoryOptions.test.ts b/client/src/components/History/HistoryOptions.test.ts
index d5a05e8fc814..a3fd8a34f87d 100644
--- a/client/src/components/History/HistoryOptions.test.ts
+++ b/client/src/components/History/HistoryOptions.test.ts
@@ -5,11 +5,11 @@ import flushPromises from "flush-promises";
 import { createPinia } from "pinia";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 import { useHistoryStore } from "@/stores/historyStore";
 import { useUserStore } from "@/stores/userStore";
 
 import HistoryOptions from "./HistoryOptions.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 import GModal from "@/components/BaseComponents/GModal.vue";
 
 const localVue = getLocalVue();
@@ -96,14 +96,10 @@ describe("History Navigation", () => {
         });
 
         const allItems = wrapper.findAllComponents(GDropdownItem);
-        const enabledOptionTexts = allItems.wrappers
-            .filter((el) => !el.props("disabled"))
-            .map((el) => el.text());
+        const enabledOptionTexts = allItems.wrappers.filter((el) => !el.props("disabled")).map((el) => el.text());
         expect(enabledOptionTexts).toStrictEqual(anonymousOptions);
 
-        const disabledOptionTexts = allItems.wrappers
-            .filter((el) => el.props("disabled"))
-            .map((el) => el.text());
+        const disabledOptionTexts = allItems.wrappers.filter((el) => el.props("disabled")).map((el) => el.text());
         expect(disabledOptionTexts).toStrictEqual(anonymousDisabledOptions);
     });
 
diff --git a/client/src/components/Visualizations/VisualizationExamples.test.js b/client/src/components/Visualizations/VisualizationExamples.test.js
index 96eb0bafcbb7..590de07cbca3 100644
--- a/client/src/components/Visualizations/VisualizationExamples.test.js
+++ b/client/src/components/Visualizations/VisualizationExamples.test.js
@@ -1,7 +1,5 @@
 import { getLocalVue } from "@tests/vitest/helpers";
 import { mount } from "@vue/test-utils";
-import GDropdown from "@/components/BaseComponents/GDropdown.vue";
-import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 import { createPinia, defineStore, setActivePinia } from "pinia";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { ref } from "vue";
@@ -10,6 +8,8 @@ import { useToast } from "@/composables/toast";
 import { createUrlUploadItem, uploadDatasets } from "@/utils/upload";
 
 import UploadExamples from "./VisualizationExamples.vue";
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 
 vi.mock("@/utils/upload", () => ({
     createUrlUploadItem: vi.fn((url, historyId, options) => ({

From 051d3185acf8c9f4014045622664b275177a6f77 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sun, 1 Mar 2026 21:09:33 -0500
Subject: [PATCH 04/11] Fix GDropdown menu tabindex and GDropdownItem default
 to a element

---
 .../components/BaseComponents/GDropdown.vue   |  8 ++++-
 .../BaseComponents/GDropdownItem.vue          | 32 +++++++++++--------
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/client/src/components/BaseComponents/GDropdown.vue b/client/src/components/BaseComponents/GDropdown.vue
index 2b584dfc2749..1ceace939e54 100644
--- a/client/src/components/BaseComponents/GDropdown.vue
+++ b/client/src/components/BaseComponents/GDropdown.vue
@@ -221,7 +221,13 @@ defineExpose({
         </button>
 
         <!-- Dropdown menu -->
-        <div v-if="shouldRenderMenu" ref="menuEl" :class="menuClasses" :role="role === 'menu' ? 'menu' : undefined">
+        <!-- tabindex="-1" matches BDropdown behavior and allows send_keys/send_escape in Selenium tests -->
+        <div
+            v-if="shouldRenderMenu"
+            ref="menuEl"
+            tabindex="-1"
+            :class="menuClasses"
+            :role="role === 'menu' ? 'menu' : undefined">
             <slot />
         </div>
     </div>
diff --git a/client/src/components/BaseComponents/GDropdownItem.vue b/client/src/components/BaseComponents/GDropdownItem.vue
index e90596ad7c59..3deee112d160 100644
--- a/client/src/components/BaseComponents/GDropdownItem.vue
+++ b/client/src/components/BaseComponents/GDropdownItem.vue
@@ -1,7 +1,12 @@
 <script setup lang="ts">
 /**
  * Dropdown menu item replacing BDropdownItem from bootstrap-vue.
- * Renders as a router-link, anchor, or button depending on props.
+ * Renders as a router-link when `to` is provided, otherwise always renders as `<a>` (defaulting to
+ * href="#") to match BDropdownItem's behavior. This is required for Selenium compatibility:
+ * label-based selectors use By.LINK_TEXT which only finds <a> elements, and select_dropdown_item()
+ * uses CSS selector "a.dropdown-item".
+ * TODO: once Selenium selectors are updated, consider rendering action items as <button> (semantically
+ * more correct for non-navigation actions).
  */
 
 import { computed, inject } from "vue";
@@ -40,6 +45,14 @@ const emit = defineEmits<{
 
 const hideDropdown = inject<() => void>("g-dropdown-hide", () => {});
 
+const tag = computed(() => {
+    if (props.to) {
+        return "router-link";
+    }
+    // Always use <a> like BDropdownItem — required for Selenium By.LINK_TEXT selectors
+    return "a";
+});
+
 const classes = computed(() => ({
     "dropdown-item": true,
     active: props.active,
@@ -52,19 +65,13 @@ function onClick(event: MouseEvent) {
         event.preventDefault();
         return;
     }
+    // Prevent href="#" anchor navigation for action items (non-router-link <a> tags)
+    if (tag.value === "a") {
+        event.preventDefault();
+    }
     emit("click", event);
     hideDropdown();
 }
-
-const tag = computed(() => {
-    if (props.to) {
-        return "router-link";
-    }
-    if (props.href) {
-        return "a";
-    }
-    return "button";
-});
 </script>
 
 <template>
@@ -72,11 +79,10 @@ const tag = computed(() => {
         :is="tag"
         :class="classes"
         :to="to"
-        :href="href"
+        :href="to ? undefined : (href ?? '#')"
         :target="target"
         :title="title"
         :disabled="disabled || undefined"
-        :type="tag === 'button' ? 'button' : undefined"
         role="menuitem"
         @click="onClick">
         <slot />

From 0a2d21fda9c609b28e3e9c57299ce13e319b4f22 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Mon, 2 Mar 2026 06:14:23 -0500
Subject: [PATCH 05/11] Fix GDropdown Escape key closing and
 VisualizationExamples test

GDropdown menu div wasn't handling Escape key events, so send_escape()
in Selenium tests had no effect. Added @keydown.esc="hide" to close
on Escape, matching BDropdown behavior.

VisualizationExamples test was clicking button inside GDropdownItem, but
GDropdownItem now renders as <a> (like BDropdownItem). Updated selectors.
---
 client/src/components/BaseComponents/GDropdown.vue            | 3 ++-
 .../components/Visualizations/VisualizationExamples.test.js   | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/src/components/BaseComponents/GDropdown.vue b/client/src/components/BaseComponents/GDropdown.vue
index 1ceace939e54..3c4ca1b4eb69 100644
--- a/client/src/components/BaseComponents/GDropdown.vue
+++ b/client/src/components/BaseComponents/GDropdown.vue
@@ -227,7 +227,8 @@ defineExpose({
             ref="menuEl"
             tabindex="-1"
             :class="menuClasses"
-            :role="role === 'menu' ? 'menu' : undefined">
+            :role="role === 'menu' ? 'menu' : undefined"
+            @keydown.esc="hide">
             <slot />
         </div>
     </div>
diff --git a/client/src/components/Visualizations/VisualizationExamples.test.js b/client/src/components/Visualizations/VisualizationExamples.test.js
index 590de07cbca3..aa72a183f428 100644
--- a/client/src/components/Visualizations/VisualizationExamples.test.js
+++ b/client/src/components/Visualizations/VisualizationExamples.test.js
@@ -80,7 +80,7 @@ describe("UploadExamples.vue", () => {
             propsData: { urlData },
         });
         const items = wrapper.findAllComponents(GDropdownItem);
-        await items.at(0).find("button").trigger("click");
+        await items.at(0).find("a").trigger("click");
         expect(createUrlUploadItem).toHaveBeenCalledWith(urlData[0].url, "fake-history-id", {
             name: "Example 1",
             ext: urlData[0].ftype,
@@ -110,7 +110,7 @@ describe("UploadExamples.vue", () => {
             propsData: { urlData },
         });
         const items = wrapper.findAllComponents(GDropdownItem);
-        await items.at(1).find("button").trigger("click");
+        await items.at(1).find("a").trigger("click");
         vi.mocked(uploadDatasets).mock.calls[0][1].error();
         expect(toastError).toHaveBeenCalledWith("Uploading the sample dataset 'Example 2' has failed.");
     });

From cd3c54ddf837d2883d336ba8a49c33d6e097659d Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 26 Mar 2026 20:03:45 -0400
Subject: [PATCH 06/11] Fix dropdown close-on-click for router-link items and
 pointer cursor

Split GDropdownItem's dynamic <component :is> into separate <router-link>
and <a> elements so the click handler reliably fires for both -- the
dynamic component pattern didn't propagate native click events for
router-link items in Vue 2 compat mode, so hideDropdown() never ran.
Also adds explicit cursor: pointer on .dropdown-item for both item types.
---
 .../BaseComponents/GDropdownItem.vue          | 31 +++++++++----------
 .../BaseComponents/GDropdownItemButton.vue    |  6 ++++
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/client/src/components/BaseComponents/GDropdownItem.vue b/client/src/components/BaseComponents/GDropdownItem.vue
index 3deee112d160..66546e41f15d 100644
--- a/client/src/components/BaseComponents/GDropdownItem.vue
+++ b/client/src/components/BaseComponents/GDropdownItem.vue
@@ -45,14 +45,6 @@ const emit = defineEmits<{
 
 const hideDropdown = inject<() => void>("g-dropdown-hide", () => {});
 
-const tag = computed(() => {
-    if (props.to) {
-        return "router-link";
-    }
-    // Always use <a> like BDropdownItem — required for Selenium By.LINK_TEXT selectors
-    return "a";
-});
-
 const classes = computed(() => ({
     "dropdown-item": true,
     active: props.active,
@@ -65,8 +57,8 @@ function onClick(event: MouseEvent) {
         event.preventDefault();
         return;
     }
-    // Prevent href="#" anchor navigation for action items (non-router-link <a> tags)
-    if (tag.value === "a") {
+    // Prevent href="#" anchor navigation for action items
+    if (!props.to) {
         event.preventDefault();
     }
     emit("click", event);
@@ -75,16 +67,23 @@ function onClick(event: MouseEvent) {
 </script>
 
 <template>
-    <component
-        :is="tag"
+    <router-link
+        v-if="to"
         :class="classes"
         :to="to"
-        :href="to ? undefined : (href ?? '#')"
         :target="target"
         :title="title"
-        :disabled="disabled || undefined"
         role="menuitem"
-        @click="onClick">
+        @click.native="onClick">
+        <slot />
+    </router-link>
+    <a v-else :class="classes" :href="href ?? '#'" :target="target" :title="title" role="menuitem" @click="onClick">
         <slot />
-    </component>
+    </a>
 </template>
+
+<style scoped>
+.dropdown-item {
+    cursor: pointer;
+}
+</style>
diff --git a/client/src/components/BaseComponents/GDropdownItemButton.vue b/client/src/components/BaseComponents/GDropdownItemButton.vue
index 55dd6ed6dc5b..f22e9c7f3312 100644
--- a/client/src/components/BaseComponents/GDropdownItemButton.vue
+++ b/client/src/components/BaseComponents/GDropdownItemButton.vue
@@ -46,3 +46,9 @@ function onClick(event: MouseEvent) {
         <slot />
     </button>
 </template>
+
+<style scoped>
+.dropdown-item {
+    cursor: pointer;
+}
+</style>

From 2262f0a4a21ed2dbdebf5559ddc7acaa31c30e40 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 26 Mar 2026 22:49:10 -0400
Subject: [PATCH 07/11] Clean up GDropdown: remove dead props, fix
 accessibility, fix MastheadDropdown close

Remove noFlip, boundary, and offset props from GDropdown since they were
accepted but never implemented (no Popper.js backing). Remove the corresponding
caller-side attributes. Add aria-disabled to GDropdownItem for screen reader
support. Add headerClasses prop to GDropdownGroup so ToolsListSectionFilters
styling works. Fix MastheadDropdown by providing g-dropdown-hide so GDropdownItem
clicks properly close the BNavItemDropdown. Fix ToolTourGeneratorItem test to
check aria-disabled instead of the disabled DOM attribute. Remove dead onMounted
hook and unused import.
---
 .../src/components/BaseComponents/GDropdown.vue   | 15 +--------------
 .../components/BaseComponents/GDropdownGroup.vue  |  4 +++-
 .../components/BaseComponents/GDropdownItem.vue   | 11 ++++++++++-
 .../src/components/Common/FilterMenuDropdown.vue  |  1 -
 .../History/Content/Dataset/DatasetDownload.vue   |  1 -
 .../HistoryOperations/SelectionOperations.vue     |  2 +-
 .../src/components/Masthead/MastheadDropdown.vue  |  8 ++++++--
 .../Tool/Buttons/ToolTourGeneratorItem.test.ts    |  6 +++---
 8 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/client/src/components/BaseComponents/GDropdown.vue b/client/src/components/BaseComponents/GDropdown.vue
index 3c4ca1b4eb69..f847769e0ae5 100644
--- a/client/src/components/BaseComponents/GDropdown.vue
+++ b/client/src/components/BaseComponents/GDropdown.vue
@@ -6,7 +6,7 @@
  * split buttons, dropup, no-caret, and menu/toggle class customization.
  */
 
-import { computed, nextTick, onBeforeUnmount, onMounted, provide, ref } from "vue";
+import { computed, nextTick, onBeforeUnmount, provide, ref } from "vue";
 
 const props = withDefaults(
     defineProps<{
@@ -20,8 +20,6 @@ const props = withDefaults(
         right?: boolean;
         /** Hide the caret icon */
         noCaret?: boolean;
-        /** Prevent menu from flipping */
-        noFlip?: boolean;
         /** Drop direction */
         dropup?: boolean;
         dropleft?: boolean;
@@ -34,16 +32,12 @@ const props = withDefaults(
         toggleClass?: string | string[] | Record<string, boolean>;
         /** Extra classes for the dropdown menu */
         menuClass?: string | string[] | Record<string, boolean>;
-        /** Boundary for positioning */
-        boundary?: string;
         /** Disabled state */
         disabled?: boolean;
         /** ARIA role */
         role?: string;
         /** Lazy render menu content */
         lazy?: boolean;
-        /** Offset */
-        offset?: number | string;
     }>(),
     {
         text: undefined,
@@ -51,7 +45,6 @@ const props = withDefaults(
         size: undefined,
         right: false,
         noCaret: false,
-        noFlip: false,
         dropup: false,
         dropleft: false,
         dropright: false,
@@ -59,11 +52,9 @@ const props = withDefaults(
         split: false,
         toggleClass: undefined,
         menuClass: undefined,
-        boundary: undefined,
         disabled: false,
         role: undefined,
         lazy: false,
-        offset: undefined,
     },
 );
 
@@ -177,10 +168,6 @@ const shouldRenderMenu = computed(() => {
     return hasBeenOpened.value;
 });
 
-onMounted(() => {
-    // Clean up on mount if needed
-});
-
 onBeforeUnmount(() => {
     document.removeEventListener("click", onClickOutside, true);
 });
diff --git a/client/src/components/BaseComponents/GDropdownGroup.vue b/client/src/components/BaseComponents/GDropdownGroup.vue
index 47cb752bdfa7..fd599b6fe1b5 100644
--- a/client/src/components/BaseComponents/GDropdownGroup.vue
+++ b/client/src/components/BaseComponents/GDropdownGroup.vue
@@ -7,12 +7,14 @@
 defineProps<{
     /** Group header text (or use #header slot) */
     header?: string;
+    /** Extra CSS classes for the header element */
+    headerClasses?: string | string[] | Record<string, boolean>;
 }>();
 </script>
 
 <template>
     <div role="group">
-        <h6 v-if="header || $slots.header" class="dropdown-header" role="presentation">
+        <h6 v-if="header || $slots.header" class="dropdown-header" :class="headerClasses" role="presentation">
             <slot name="header">{{ header }}</slot>
         </h6>
         <slot />
diff --git a/client/src/components/BaseComponents/GDropdownItem.vue b/client/src/components/BaseComponents/GDropdownItem.vue
index 66546e41f15d..92db5271c0d4 100644
--- a/client/src/components/BaseComponents/GDropdownItem.vue
+++ b/client/src/components/BaseComponents/GDropdownItem.vue
@@ -73,11 +73,20 @@ function onClick(event: MouseEvent) {
         :to="to"
         :target="target"
         :title="title"
+        :aria-disabled="disabled || undefined"
         role="menuitem"
         @click.native="onClick">
         <slot />
     </router-link>
-    <a v-else :class="classes" :href="href ?? '#'" :target="target" :title="title" role="menuitem" @click="onClick">
+    <a
+        v-else
+        :class="classes"
+        :href="href ?? '#'"
+        :target="target"
+        :title="title"
+        :aria-disabled="disabled || undefined"
+        role="menuitem"
+        @click="onClick">
         <slot />
     </a>
 </template>
diff --git a/client/src/components/Common/FilterMenuDropdown.vue b/client/src/components/Common/FilterMenuDropdown.vue
index 262f8ef3953a..c00868813d55 100644
--- a/client/src/components/Common/FilterMenuDropdown.vue
+++ b/client/src/components/Common/FilterMenuDropdown.vue
@@ -138,7 +138,6 @@ function setValue(val: FilterValue) {
                 class="w-100"
                 menu-class="w-100"
                 size="sm"
-                boundary="window"
                 :disabled="props.disabled"
                 :toggle-class="props.error ? 'text-danger' : ''">
                 <GDropdownItem href="#" @click="setValue(undefined)"><i>(any)</i></GDropdownItem>
diff --git a/client/src/components/History/Content/Dataset/DatasetDownload.vue b/client/src/components/History/Content/Dataset/DatasetDownload.vue
index f98db7039d21..78e44d0f2ac8 100644
--- a/client/src/components/History/Content/Dataset/DatasetDownload.vue
+++ b/client/src/components/History/Content/Dataset/DatasetDownload.vue
@@ -50,7 +50,6 @@ function onDownload(resource: string, extension = "") {
         v-g-tooltip.hover
         dropup
         no-caret
-        no-flip
         size="sm"
         variant="link"
         toggle-class="text-decoration-none"
diff --git a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
index c0ccc93c9634..2662f879d68a 100644
--- a/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
+++ b/client/src/components/History/CurrentHistory/HistoryOperations/SelectionOperations.vue
@@ -1,6 +1,6 @@
 <template>
     <section v-if="hasSelection && !isMultiViewItem">
-        <GDropdown text="Selection" size="sm" variant="primary" data-description="selected content menu" no-flip>
+        <GDropdown text="Selection" size="sm" variant="primary" data-description="selected content menu">
             <template v-slot:button-content>
                 <span v-if="selectionMatchesQuery" data-test-id="all-filter-selected">
                     {{ localize("All") }} <b>{{ totalItemsInQuery }}</b> {{ localize("selected") }}
diff --git a/client/src/components/Masthead/MastheadDropdown.vue b/client/src/components/Masthead/MastheadDropdown.vue
index f5be88f3ca2b..65d8395f9139 100644
--- a/client/src/components/Masthead/MastheadDropdown.vue
+++ b/client/src/components/Masthead/MastheadDropdown.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BNavItemDropdown } from "bootstrap-vue";
-import { type PropType, ref } from "vue";
+import { type PropType, provide, ref } from "vue";
 
 import type { IconLike } from "@/components/icons/galaxyIcons";
 
 import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 import TextShort from "@/components/Common/TextShort.vue";
 
-const dropdown = ref(null);
+const dropdown = ref<InstanceType<typeof BNavItemDropdown>>();
+
+provide("g-dropdown-hide", () => {
+    dropdown.value?.hide();
+});
 
 interface MenuItem {
     title: string;
diff --git a/client/src/components/Tool/Buttons/ToolTourGeneratorItem.test.ts b/client/src/components/Tool/Buttons/ToolTourGeneratorItem.test.ts
index 62179e5311f9..3a2d0fe10878 100644
--- a/client/src/components/Tool/Buttons/ToolTourGeneratorItem.test.ts
+++ b/client/src/components/Tool/Buttons/ToolTourGeneratorItem.test.ts
@@ -219,7 +219,7 @@ describe("Tool Generated Tour Dropdown Item", () => {
     /** Confirms the tour is _(still)_ generating, given that the dropdown item is disabled
      * and the tour store not yet updated. */
     function tourIsGenerating(dropdownItem: Wrapper<Vue>) {
-        expect(dropdownItem.attributes("disabled")).toBe("disabled");
+        expect(dropdownItem.attributes("aria-disabled")).toBe("true");
         expect(setTourMock).toHaveBeenCalledTimes(0);
     }
 
@@ -227,7 +227,7 @@ describe("Tool Generated Tour Dropdown Item", () => {
     function tourHasGenerated(dropdownItem: Wrapper<Vue>) {
         // The second toast confirms the tour is ready
         expect(toastMock).toHaveBeenCalledWith("You can now start the tour", "success");
-        expect(dropdownItem.attributes("disabled")).toBeUndefined();
+        expect(dropdownItem.attributes("aria-disabled")).toBeUndefined();
 
         // The tour is now in the store, with the expected key
         expect(setTourMock).toHaveBeenCalledWith(`tool-generated-${TEST_TOOL_ID}-${TEST_TOOL_VERSION}`);
@@ -239,7 +239,7 @@ describe("Tool Generated Tour Dropdown Item", () => {
     function tourGenerationFailedWith(dropdownItem: Wrapper<Vue>, message: string) {
         // The second toast confirms the tour generation failed
         expect(toastMock).toHaveBeenCalledWith(message, "error");
-        expect(dropdownItem.attributes("disabled")).toBeUndefined();
+        expect(dropdownItem.attributes("aria-disabled")).toBeUndefined();
         expect(setTourMock).toHaveBeenCalledTimes(0);
     }
 });

From 539931d39d7cb620914a7b8f33791dd4c447a759 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Mon, 25 May 2026 12:57:14 -0400
Subject: [PATCH 08/11] Migrate CompositeSlotRow to GDropdown, fix import
 ordering

CompositeSlotRow was added on dev after the branch was cut -- swap it
to the GDropdown family along with the rest of the sweep. Import order
fixups in FilterMenuDropdown and Workflow Editor are linter changes.
---
 .../components/Common/FilterMenuDropdown.vue  |  2 +-
 .../Upload/methods/CompositeSlotRow.vue       | 24 ++++++++++---------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Common/FilterMenuDropdown.vue b/client/src/components/Common/FilterMenuDropdown.vue
index c00868813d55..f34b37e0d32d 100644
--- a/client/src/components/Common/FilterMenuDropdown.vue
+++ b/client/src/components/Common/FilterMenuDropdown.vue
@@ -9,9 +9,9 @@ import { useQuotaUsageStore } from "@/stores/quotaUsageStore";
 import type { FilterType, ValidFilter } from "@/utils/filtering";
 import { capitalizeFirstLetter } from "@/utils/strings";
 
+import GModal from "../BaseComponents/GModal.vue";
 import GDropdown from "@/components/BaseComponents/GDropdown.vue";
 import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
-import GModal from "../BaseComponents/GModal.vue";
 import QuotaUsageBar from "@/components/User/DiskUsage/Quota/QuotaUsageBar.vue";
 
 type FilterValue = QuotaUsage | string | boolean | undefined;
diff --git a/client/src/components/Panels/Upload/methods/CompositeSlotRow.vue b/client/src/components/Panels/Upload/methods/CompositeSlotRow.vue
index de6eb41d537a..42044894ec03 100644
--- a/client/src/components/Panels/Upload/methods/CompositeSlotRow.vue
+++ b/client/src/components/Panels/Upload/methods/CompositeSlotRow.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faCheck, faCloud, faEdit, faExclamation, faLaptop, faLink, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BDropdown, BDropdownItem, BFormInput, BFormTextarea } from "bootstrap-vue";
+import { BFormInput, BFormTextarea } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
 import type { SelectionItem } from "@/components/SelectionDialog/selectionTypes";
@@ -12,6 +12,8 @@ import { bytesToString } from "@/utils/utils";
 import type { CompositeSlot, CompositeSlotMode } from "../types/uploadItem";
 
 import GButton from "@/components/BaseComponents/GButton.vue";
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownItem from "@/components/BaseComponents/GDropdownItem.vue";
 import RemoteFileBrowserModal from "@/components/FileBrowser/RemoteFileBrowserModal.vue";
 
 interface Props {
@@ -217,7 +219,7 @@ const display = computed(() => {
             </small>
 
             <!-- Source mode dropdown -->
-            <BDropdown
+            <GDropdown
                 size="sm"
                 :variant="isFilled ? 'secondary' : 'primary'"
                 class="mr-1 flex-shrink-0"
@@ -225,23 +227,23 @@ const display = computed(() => {
                 <template v-slot:button-content>
                     {{ dropdownLabel }}
                 </template>
-                <BDropdownItem data-test-id="composite-slot-enter-local" @click="openFileBrowser">
+                <GDropdownItem data-test-id="composite-slot-enter-local" @click="openFileBrowser">
                     <FontAwesomeIcon :icon="faLaptop" fixed-width class="mr-1" />
                     Choose local file
-                </BDropdownItem>
-                <BDropdownItem @click="showRemoteBrowser = true">
+                </GDropdownItem>
+                <GDropdownItem @click="showRemoteBrowser = true">
                     <FontAwesomeIcon :icon="faCloud" fixed-width class="mr-1" />
                     Browse remote files
-                </BDropdownItem>
-                <BDropdownItem data-test-id="composite-slot-enter-url" @click="selectMode('url')">
+                </GDropdownItem>
+                <GDropdownItem data-test-id="composite-slot-enter-url" @click="selectMode('url')">
                     <FontAwesomeIcon :icon="faLink" fixed-width class="mr-1" />
                     Enter URL
-                </BDropdownItem>
-                <BDropdownItem data-test-id="composite-slot-enter-paste" @click="selectMode('paste')">
+                </GDropdownItem>
+                <GDropdownItem data-test-id="composite-slot-enter-paste" @click="selectMode('paste')">
                     <FontAwesomeIcon :icon="faEdit" fixed-width class="mr-1" />
                     Paste content
-                </BDropdownItem>
-            </BDropdown>
+                </GDropdownItem>
+            </GDropdown>
 
             <!-- Clear button -->
             <GButton

From ff1e7b0a3dbc619c3dfb6194136b33149d6911bf Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 29 Jul 2026 18:23:24 -0400
Subject: [PATCH 09/11] Migrate FormSelectionPreference to GDropdown

Dev extracted the select-preference dropdown out of FormSelection.vue into
its own component after this branch forked, so it landed with BDropdown still
in place. Same swap as the rest of the sweep.
---
 .../Form/Elements/FormSelectionPreference.vue | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Form/Elements/FormSelectionPreference.vue b/client/src/components/Form/Elements/FormSelectionPreference.vue
index 1a41d92ce9a4..3c770fb8062b 100644
--- a/client/src/components/Form/Elements/FormSelectionPreference.vue
+++ b/client/src/components/Form/Elements/FormSelectionPreference.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BDropdown, BDropdownItemButton } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 
 import { useUserFlagsStore } from "@/stores/userFlagsStore";
 
+import GDropdown from "@/components/BaseComponents/GDropdown.vue";
+import GDropdownItemButton from "@/components/BaseComponents/GDropdownItemButton.vue";
+
 interface Props {
     /**
      * Whether the "switch to column select" button is shown
@@ -35,26 +37,26 @@ const { preferredFormSelectElement } = storeToRefs(useUserFlagsStore());
             switch to simple select
         </button>
 
-        <BDropdown toggle-class="inline-icon-button d-block px-1" variant="link" no-caret>
+        <GDropdown toggle-class="inline-icon-button d-block px-1" variant="link" no-caret>
             <template v-slot:button-content>
                 <FontAwesomeIcon :icon="faCaretDown" />
                 <span class="sr-only">select element preferences</span>
             </template>
-            <BDropdownItemButton
+            <GDropdownItemButton
                 :active="preferredFormSelectElement === 'none'"
                 @click="preferredFormSelectElement = 'none'">
                 No preference
-            </BDropdownItemButton>
-            <BDropdownItemButton
+            </GDropdownItemButton>
+            <GDropdownItemButton
                 :active="preferredFormSelectElement === 'multi'"
                 @click="preferredFormSelectElement = 'multi'">
                 Default to simple select
-            </BDropdownItemButton>
-            <BDropdownItemButton
+            </GDropdownItemButton>
+            <GDropdownItemButton
                 :active="preferredFormSelectElement === 'many'"
                 @click="preferredFormSelectElement = 'many'">
                 Default to column select
-            </BDropdownItemButton>
-        </BDropdown>
+            </GDropdownItemButton>
+        </GDropdown>
     </div>
 </template>

From 01dd6ada9aa68226f9978349ede4dbefb3908a90 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 29 Jul 2026 21:31:04 -0400
Subject: [PATCH 10/11] Let GDropdownItem with a real href navigate

The click handler cancelled navigation for anything without a :to, which also
killed target="_blank" -- so external-link items in GCard never opened their
tab. That's what test_workflow_management.py::test_view was tripping over.

Only cancel when the href is "#", explicit or defaulted, which is what BLink
did underneath BDropdownItem. FilterMenuDropdown passes href="#" directly and
still needs the page not to jump, hence checking the value rather than just
its presence.
---
 .../BaseComponents/GDropdownItem.test.ts      | 58 +++++++++++++++++++
 .../BaseComponents/GDropdownItem.vue          |  6 +-
 2 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/BaseComponents/GDropdownItem.test.ts

diff --git a/client/src/components/BaseComponents/GDropdownItem.test.ts b/client/src/components/BaseComponents/GDropdownItem.test.ts
new file mode 100644
index 000000000000..4b4db7cfb245
--- /dev/null
+++ b/client/src/components/BaseComponents/GDropdownItem.test.ts
@@ -0,0 +1,58 @@
+import { getLocalVue } from "@tests/vitest/helpers";
+import { mount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+
+import GDropdownItem from "./GDropdownItem.vue";
+
+const localVue = getLocalVue(true);
+
+/** Click the item and report whether the navigation was cancelled. */
+async function clickAndCheckDefaultPrevented(props: object) {
+    const wrapper = mount(GDropdownItem as object, {
+        propsData: props,
+        slots: { default: "Item" },
+        localVue,
+    });
+    const event = new MouseEvent("click", { bubbles: true, cancelable: true });
+    wrapper.get("a").element.dispatchEvent(event);
+    await wrapper.vm.$nextTick();
+    return { wrapper, defaultPrevented: event.defaultPrevented };
+}
+
+describe("GDropdownItem.vue", () => {
+    it("cancels navigation for action items, which fall back to href='#'", async () => {
+        const { wrapper, defaultPrevented } = await clickAndCheckDefaultPrevented({});
+
+        expect(wrapper.get("a").attributes("href")).toBe("#");
+        expect(defaultPrevented).toBe(true);
+        expect(wrapper.emitted("click")).toHaveLength(1);
+    });
+
+    it("cancels navigation when href='#' is passed explicitly", async () => {
+        const { wrapper, defaultPrevented } = await clickAndCheckDefaultPrevented({ href: "#" });
+
+        expect(defaultPrevented).toBe(true);
+        expect(wrapper.emitted("click")).toHaveLength(1);
+    });
+
+    it("lets a real href navigate so target='_blank' can open a new tab", async () => {
+        const { wrapper, defaultPrevented } = await clickAndCheckDefaultPrevented({
+            href: "https://example.org/workflow.ga",
+            target: "_blank",
+        });
+
+        expect(wrapper.get("a").attributes("target")).toBe("_blank");
+        expect(defaultPrevented).toBe(false);
+        expect(wrapper.emitted("click")).toHaveLength(1);
+    });
+
+    it("cancels navigation and emits nothing when disabled", async () => {
+        const { wrapper, defaultPrevented } = await clickAndCheckDefaultPrevented({
+            href: "https://example.org/workflow.ga",
+            disabled: true,
+        });
+
+        expect(defaultPrevented).toBe(true);
+        expect(wrapper.emitted("click")).toBeUndefined();
+    });
+});
diff --git a/client/src/components/BaseComponents/GDropdownItem.vue b/client/src/components/BaseComponents/GDropdownItem.vue
index 92db5271c0d4..283d53526195 100644
--- a/client/src/components/BaseComponents/GDropdownItem.vue
+++ b/client/src/components/BaseComponents/GDropdownItem.vue
@@ -57,8 +57,10 @@ function onClick(event: MouseEvent) {
         event.preventDefault();
         return;
     }
-    // Prevent href="#" anchor navigation for action items
-    if (!props.to) {
+    // Cancel navigation only for action items, whose href is "#" (passed explicitly or defaulted).
+    // A real href has to navigate -- cancelling it also kills target="_blank", so external links
+    // would never open. Matches BLink, which BDropdownItem rendered through.
+    if (!props.to && (!props.href || props.href === "#")) {
         event.preventDefault();
     }
     emit("click", event);

From c2432f9d5b17a591194a55246276e280cc63efef Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 30 Jul 2026 09:02:01 -0400
Subject: [PATCH 11/11] Honor form-class on GDropdownForm

GDropdownForm declared no props at all, so NodeInspector's form-class="px-2"
was silently dropped and the form kept the hardcoded px-4 py-3 -- much roomier
than BDropdownForm rendered it (0.25rem/1.5rem base with px-2 overriding the
horizontal padding).

Made the padding a prop default the caller replaces instead of layering onto,
since two competing bootstrap spacing utilities are resolved by stylesheet
order, not by which one the caller passed -- px-4 would have beaten px-2.
---
 .../BaseComponents/GDropdownForm.vue          | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/client/src/components/BaseComponents/GDropdownForm.vue b/client/src/components/BaseComponents/GDropdownForm.vue
index c8f41d57f4e4..690412999a9c 100644
--- a/client/src/components/BaseComponents/GDropdownForm.vue
+++ b/client/src/components/BaseComponents/GDropdownForm.vue
@@ -1,7 +1,24 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+/**
+ * Form inside a dropdown menu, replacing BDropdownForm from bootstrap-vue.
+ * The default padding stands in for bootstrap-vue's .b-dropdown-form; callers override it wholesale
+ * rather than layering, since competing bootstrap spacing utilities are decided by stylesheet order
+ * rather than by which one the caller passed.
+ */
+
+withDefaults(
+    defineProps<{
+        /** Padding/layout classes for the form element */
+        formClass?: string;
+    }>(),
+    {
+        formClass: "px-4 py-3",
+    },
+);
+</script>
 
 <template>
-    <form class="px-4 py-3" role="presentation" @click.stop @submit.prevent>
+    <form :class="formClass" role="presentation" @click.stop @submit.prevent>
         <slot />
     </form>
 </template>