diff --git a/browser_tests/ComfyPage.ts b/browser_tests/ComfyPage.ts
index 72f51aab..93ce9355 100644
--- a/browser_tests/ComfyPage.ts
+++ b/browser_tests/ComfyPage.ts
@@ -229,6 +229,32 @@ class Topbar {
       .locator('.workflow-tabs .workflow-label')
       .allInnerTexts()
   }
+
+  async triggerTopbarCommand(path: string[]) {
+    if (path.length < 2) {
+      throw new Error('Path is too short')
+    }
+
+    const tabName = path[0]
+    const topLevelMenu = this.page.locator(
+      `.top-menubar .p-menubar-item:has-text("${tabName}")`
+    )
+    await topLevelMenu.waitFor({ state: 'visible' })
+    await topLevelMenu.click()
+
+    for (let i = 1; i < path.length; i++) {
+      const commandName = path[i]
+      const menuItem = this.page.locator(
+        `.top-menubar .p-menubar-submenu .p-menubar-item:has-text("${commandName}")`
+      )
+      await menuItem.waitFor({ state: 'visible' })
+      await menuItem.hover()
+
+      if (i === path.length - 1) {
+        await menuItem.click()
+      }
+    }
+  }
 }
 
 class ComfyMenu {
diff --git a/browser_tests/extensionAPI.spec.ts b/browser_tests/extensionAPI.spec.ts
new file mode 100644
index 00000000..8002bda5
--- /dev/null
+++ b/browser_tests/extensionAPI.spec.ts
@@ -0,0 +1,32 @@
+import { expect } from '@playwright/test'
+import { comfyPageFixture as test } from './ComfyPage'
+
+test.describe('Topbar commands', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Floating')
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.UseNewMenu', 'Disabled')
+  })
+
+  test('Should allow registering topbar commands', async ({ comfyPage }) => {
+    await comfyPage.page.evaluate(() => {
+      window['app'].extensionManager.menu.registerTopbarCommands(
+        ['ext'],
+        [
+          {
+            id: 'foo',
+            label: 'foo',
+            function: () => {
+              window['foo'] = true
+            }
+          }
+        ]
+      )
+    })
+
+    await comfyPage.menu.topbar.triggerTopbarCommand(['ext', 'foo'])
+    expect(await comfyPage.page.evaluate(() => window['foo'])).toBe(true)
+  })
+})
diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index e83ec2c4..086545ca 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/src/components/topbar/TopMenubar.vue
@@ -1,13 +1,10 @@
 <template>
   <teleport to=".comfyui-body-top">
-    <div
-      class="top-menubar comfyui-menu flex items-center"
-      v-show="betaMenuEnabled"
-    >
+    <div class="comfyui-menu flex items-center" v-show="betaMenuEnabled">
       <h1 class="comfyui-logo mx-2">ComfyUI</h1>
       <Menubar
         :model="items"
-        class="border-none p-0 bg-transparent"
+        class="top-menubar border-none p-0 bg-transparent"
         :pt="{
           rootList: 'gap-0 flex-nowrap'
         }"