diff --git a/docs/extensions/capabilities/common-capabilities.md b/docs/extensions/capabilities/common-capabilities.md
index c106ed2eb9..a399a7bc03 100644
--- a/docs/extensions/capabilities/common-capabilities.md
+++ b/docs/extensions/capabilities/common-capabilities.md
@@ -219,6 +219,34 @@ export default class ExampleExtension extends Renderer.LensExtension {
 
 ```
 
+### Top Bar Items
+
+This extension can register custom components to a top bar area.
+
+```typescript
+import React from "react";
+import { Renderer } from "@k8slens/extensions";
+
+const {
+  Component: {
+    Icon,
+  }
+} = Renderer;
+
+export default class ExampleExtension extends Renderer.LensExtension {
+  topBarItems = [
+    {
+      components: {
+        Item: (
+          <Icon material="favorite" onClick={() => this.navigate("/example-page" />
+        )
+      }
+    }
+  ]
+}
+
+```
+
 ### Status Bar Items
 
 This extension can register custom icons and text to a status bar area.
diff --git a/src/extensions/registries/topbar-registry.ts b/src/extensions/registries/topbar-registry.ts
index a75aeab8c6..37b55faaaa 100644
--- a/src/extensions/registries/topbar-registry.ts
+++ b/src/extensions/registries/topbar-registry.ts
@@ -23,7 +23,7 @@ import type React from "react";
 import { BaseRegistry } from "./base-registry";
 
 interface TopBarComponents {
-  Item?: React.ComponentType;
+  Item: React.ComponentType;
 }
 
 export interface TopBarRegistration {
diff --git a/src/renderer/components/cluster-manager/topbar.test.tsx b/src/renderer/components/layout/__tests__/topbar.test.tsx
similarity index 92%
rename from src/renderer/components/cluster-manager/topbar.test.tsx
rename to src/renderer/components/layout/__tests__/topbar.test.tsx
index 3471b977db..a8e69ed302 100644
--- a/src/renderer/components/cluster-manager/topbar.test.tsx
+++ b/src/renderer/components/layout/__tests__/topbar.test.tsx
@@ -22,8 +22,8 @@
 import React from "react";
 import { render } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
-import { TopBar } from "../layout/topbar";
-import { TopBarRegistry } from "../../../extensions/registries";
+import { TopBar } from "../topbar";
+import { TopBarRegistry } from "../../../../extensions/registries";
 
 describe("<TopBar/>", () => {
   beforeEach(() => {
@@ -53,7 +53,7 @@ describe("<TopBar/>", () => {
     TopBarRegistry.getInstance().getItems = jest.fn().mockImplementationOnce(() => [
       {
         components: {
-          Item: <span data-testid={testId}>{text}</span>
+          Item: () => <span data-testid={testId}>{text}</span>
         }
       }
     ]);
diff --git a/src/renderer/components/layout/topbar.tsx b/src/renderer/components/layout/topbar.tsx
index 74bc73de36..135407f7e1 100644
--- a/src/renderer/components/layout/topbar.tsx
+++ b/src/renderer/components/layout/topbar.tsx
@@ -45,7 +45,7 @@ export const TopBar = observer(({ label, children, ...rest }: Props) => {
 
           return (
             <div key={index}>
-              {registration.components.Item}
+              <registration.components.Item />
             </div>
           );
         })}