diff --git a/ts/editor-toolbar/ButtonDropdown.svelte b/ts/editor-toolbar/ButtonDropdown.svelte
new file mode 100644
index 000000000..3f10acec5
--- /dev/null
+++ b/ts/editor-toolbar/ButtonDropdown.svelte
@@ -0,0 +1,16 @@
+<script lang="typescript">
+    import type { Buttons } from "./types";
+    import ButtonGroup from "./ButtonGroup.svelte";
+
+    export let id = "";
+    export let className = "";
+    export let props: Record<string, string> = {};
+
+    function extendClassName(className: string): string {
+        return `dropdown-menu bg-transparent border-0 ${className}`;
+    }
+
+    export let buttons: Buttons;
+</script>
+
+<ButtonGroup {id} className={extendClassName(className)} {props} {buttons} />
diff --git a/ts/editor-toolbar/ButtonGroup.svelte b/ts/editor-toolbar/ButtonGroup.svelte
index 0ae2725b9..96dc42931 100644
--- a/ts/editor-toolbar/ButtonGroup.svelte
+++ b/ts/editor-toolbar/ButtonGroup.svelte
@@ -1,6 +1,10 @@
 <script lang="typescript">
     import type { Buttons } from "./types";
 
+    export let id = "";
+    export let className = "";
+    export let props: Record<string, string> = {};
+
     export let buttons: Buttons;
 </script>
 
@@ -47,7 +51,7 @@
     }
 </style>
 
-<ul>
+<ul {id} class={className} {...props}>
     {#each buttons as button}
         <li>
             {#if Array.isArray(button)}
diff --git a/ts/editor-toolbar/index.ts b/ts/editor-toolbar/index.ts
index 801510556..b30448000 100644
--- a/ts/editor-toolbar/index.ts
+++ b/ts/editor-toolbar/index.ts
@@ -64,4 +64,5 @@ export { default as SelectButton } from "./SelectButton.svelte";
 
 export { default as DropdownMenu } from "./DropdownMenu.svelte";
 export { default as DropdownItem } from "./DropdownItem.svelte";
+export { default as ButtonDropdown } from "./DropdownMenu.svelte";
 export { default as WithDropdownMenu } from "./WithDropdownMenu.svelte";