diff --git a/docusaurus/docs/visualizations.md b/docusaurus/docs/visualizations.md
index 3cfe921e4..a439ff208 100644
--- a/docusaurus/docs/visualizations.md
+++ b/docusaurus/docs/visualizations.md
@@ -44,7 +44,7 @@ in a typical dashboard panel when you view the **JSON** tab in the panel inspect
 
 ## Menu
 
-The menu property of type VizPanelMenu is optionl, when set it defines a menu in the top right of the panel. The menu object is only activated when the dropdown menu itself is rendered. So the best way to add dynamic menu actions and links is by adding them in a [behavior](./advanced-behaviors.md) attached to the menu.
+The menu property of type VizPanelMenu is optional, when set it defines a menu in the top right of the panel. The menu object is only activated when the dropdown menu itself is rendered. So the best way to add dynamic menu actions and links is by adding them in a [behavior](./advanced-behaviors.md) attached to the menu.
 
 ```ts
 new VizPanel({
diff --git a/packages/scenes/src/components/VizPanel/VizPanelMenu.tsx b/packages/scenes/src/components/VizPanel/VizPanelMenu.tsx
index 7899c02dc..c10df3bcb 100644
--- a/packages/scenes/src/components/VizPanel/VizPanelMenu.tsx
+++ b/packages/scenes/src/components/VizPanel/VizPanelMenu.tsx
@@ -39,6 +39,13 @@ function VizPanelMenuRenderer({ model }: SceneComponentProps<VizPanelMenu>) {
 
   const renderItems = (items: PanelMenuItem[]) => {
     return items.map((item) => {
+      // @ts-ignore
+      const Component: () => React.ReactElement | null = item.component;
+
+      if (Component) {
+        return <Component key={item.text} />;
+      }
+
       switch (item.type) {
         case 'divider':
           return <Menu.Divider key={item.text} />;