diff --git a/src/core/components/menu/__workshop__/customSelectedState.tsx b/src/core/components/menu/__workshop__/customSelectedState.tsx
new file mode 100644
index 000000000..97e8e4cbc
--- /dev/null
+++ b/src/core/components/menu/__workshop__/customSelectedState.tsx
@@ -0,0 +1,38 @@
+import {ChevronDownIcon} from '@sanity/icons'
+import {useSelect} from '@sanity/ui-workshop'
+import {Box, Button} from '../../../primitives'
+import {Menu} from '../menu'
+import {MenuButton} from '../menuButton'
+import {MenuItem} from '../menuItem'
+
+const selectedOptions = {
+  undefined: 'undefined',
+  true: true,
+  false: false,
+} as const
+
+export default function CustomSelectedStateStory() {
+  const selected = useSelect('Selected', selectedOptions, false)
+
+  return (
+    <Box padding={4}>
+      <MenuButton
+        button={
+          <Button
+            icon={ChevronDownIcon}
+            mode="bleed"
+            selected={selected === 'undefined' ? undefined : selected}
+            text="Menu"
+          />
+        }
+        id="test-menu"
+        menu={
+          <Menu>
+            <MenuItem text="Item 1" />
+            <MenuItem text="Item 2" />
+          </Menu>
+        }
+      />
+    </Box>
+  )
+}
diff --git a/src/core/components/menu/__workshop__/index.ts b/src/core/components/menu/__workshop__/index.ts
index 68d7e32af..2b6e0c513 100644
--- a/src/core/components/menu/__workshop__/index.ts
+++ b/src/core/components/menu/__workshop__/index.ts
@@ -80,5 +80,10 @@ export default defineScope({
       title: 'Avatar menu',
       component: lazy(() => import('./avatarMenu')),
     },
+    {
+      name: 'custom-selected-state',
+      title: 'Custom selected state',
+      component: lazy(() => import('./customSelectedState')),
+    },
   ],
 })