diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.js b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.js
index edc60a69a57f3f..34c594474312b5 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.js
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.js
@@ -3,11 +3,13 @@ import * as React from 'react';
 import Badge from '@mui/joy/Badge';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
+import Dropdown from '@mui/joy/Dropdown';
 import Input from '@mui/joy/Input';
 import IconButton from '@mui/joy/IconButton';
 import ListDivider from '@mui/joy/ListDivider';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import Menu from '@mui/joy/Menu';
+import MenuButton from '@mui/joy/MenuButton';
 import MenuItem from '@mui/joy/MenuItem';
 import Typography from '@mui/joy/Typography';
 import Sheet from '@mui/joy/Sheet';
@@ -19,7 +21,6 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import ColorLensRoundedIcon from '@mui/icons-material/ColorLensRounded';
 
 export default function ColorInversionHeader() {
-  const [anchorEl, setAnchorEl] = React.useState(null);
   const [color, setColor] = React.useState('primary');
   return (
     <Sheet
@@ -52,53 +53,52 @@ export default function ColorInversionHeader() {
         <ColorLensRoundedIcon fontSize="small" />
       </IconButton>
       <Box sx={{ flex: 1, display: 'flex', gap: 1, px: 2 }}>
-        <Chip
-          variant="outlined"
-          onClick={(event) => {
-            setAnchorEl(event.currentTarget);
-          }}
-          endDecorator={<KeyboardArrowDownIcon />}
-        >
-          Main
-        </Chip>
-        <Menu
-          variant="outlined"
-          anchorEl={anchorEl}
-          open={Boolean(anchorEl)}
-          onClose={() => setAnchorEl(null)}
-          placement="bottom-start"
-          disablePortal
-          size="sm"
-          sx={{
-            '--ListItemDecorator-size': '24px',
-            '--ListItem-minHeight': '40px',
-            '--ListDivider-gap': '4px',
-            minWidth: 200,
-          }}
-        >
-          <MenuItem onClick={() => setAnchorEl(null)}>
-            <ListItemDecorator>
-              <BubbleChartIcon />
-            </ListItemDecorator>
-            Products
-          </MenuItem>
-          <ListDivider />
-          <MenuItem onClick={() => setAnchorEl(null)}>Pricing</MenuItem>
-          <MenuItem onClick={() => setAnchorEl(null)}>
-            Case studies{' '}
-            <Chip
-              variant="outlined"
-              size="sm"
-              sx={{
-                ml: 'auto',
-                bgcolor: (theme) =>
-                  `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
-              }}
-            >
-              Beta
-            </Chip>
-          </MenuItem>
-        </Menu>
+        <Dropdown>
+          <MenuButton
+            sx={{
+              '--Button-radius': '1.5rem',
+            }}
+            variant="outlined"
+            endDecorator={<KeyboardArrowDownIcon />}
+          >
+            Main
+          </MenuButton>
+          <Menu
+            variant="outlined"
+            placement="bottom-start"
+            disablePortal
+            size="sm"
+            sx={{
+              '--ListItemDecorator-size': '24px',
+              '--ListItem-minHeight': '40px',
+              '--ListDivider-gap': '4px',
+              minWidth: 200,
+            }}
+          >
+            <MenuItem>
+              <ListItemDecorator>
+                <BubbleChartIcon />
+              </ListItemDecorator>
+              Products
+            </MenuItem>
+            <ListDivider />
+            <MenuItem>Pricing</MenuItem>
+            <MenuItem>
+              Case studies{' '}
+              <Chip
+                variant="outlined"
+                size="sm"
+                sx={{
+                  ml: 'auto',
+                  bgcolor: (theme) =>
+                    `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
+                }}
+              >
+                Beta
+              </Chip>
+            </MenuItem>
+          </Menu>
+        </Dropdown>
       </Box>
       <Box sx={{ display: 'flex', flexShrink: 0, gap: 2 }}>
         <Button
diff --git a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx
index b42268abb8e738..5e26d914332632 100644
--- a/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx
+++ b/docs/data/joy/main-features/color-inversion/ColorInversionHeader.tsx
@@ -3,11 +3,13 @@ import { ColorPaletteProp } from '@mui/joy/styles';
 import Badge from '@mui/joy/Badge';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
+import Dropdown from '@mui/joy/Dropdown';
 import Input from '@mui/joy/Input';
 import IconButton from '@mui/joy/IconButton';
 import ListDivider from '@mui/joy/ListDivider';
 import ListItemDecorator from '@mui/joy/ListItemDecorator';
 import Menu from '@mui/joy/Menu';
+import MenuButton from '@mui/joy/MenuButton';
 import MenuItem from '@mui/joy/MenuItem';
 import Typography from '@mui/joy/Typography';
 import Sheet from '@mui/joy/Sheet';
@@ -19,7 +21,6 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import ColorLensRoundedIcon from '@mui/icons-material/ColorLensRounded';
 
 export default function ColorInversionHeader() {
-  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
   const [color, setColor] = React.useState<ColorPaletteProp>('primary');
   return (
     <Sheet
@@ -57,53 +58,52 @@ export default function ColorInversionHeader() {
         <ColorLensRoundedIcon fontSize="small" />
       </IconButton>
       <Box sx={{ flex: 1, display: 'flex', gap: 1, px: 2 }}>
-        <Chip
-          variant="outlined"
-          onClick={(event) => {
-            setAnchorEl(event.currentTarget);
-          }}
-          endDecorator={<KeyboardArrowDownIcon />}
-        >
-          Main
-        </Chip>
-        <Menu
-          variant="outlined"
-          anchorEl={anchorEl}
-          open={Boolean(anchorEl)}
-          onClose={() => setAnchorEl(null)}
-          placement="bottom-start"
-          disablePortal
-          size="sm"
-          sx={{
-            '--ListItemDecorator-size': '24px',
-            '--ListItem-minHeight': '40px',
-            '--ListDivider-gap': '4px',
-            minWidth: 200,
-          }}
-        >
-          <MenuItem onClick={() => setAnchorEl(null)}>
-            <ListItemDecorator>
-              <BubbleChartIcon />
-            </ListItemDecorator>
-            Products
-          </MenuItem>
-          <ListDivider />
-          <MenuItem onClick={() => setAnchorEl(null)}>Pricing</MenuItem>
-          <MenuItem onClick={() => setAnchorEl(null)}>
-            Case studies{' '}
-            <Chip
-              variant="outlined"
-              size="sm"
-              sx={{
-                ml: 'auto',
-                bgcolor: (theme) =>
-                  `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
-              }}
-            >
-              Beta
-            </Chip>
-          </MenuItem>
-        </Menu>
+        <Dropdown>
+          <MenuButton
+            sx={{
+              '--Button-radius': '1.5rem',
+            }}
+            variant="outlined"
+            endDecorator={<KeyboardArrowDownIcon />}
+          >
+            Main
+          </MenuButton>
+          <Menu
+            variant="outlined"
+            placement="bottom-start"
+            disablePortal
+            size="sm"
+            sx={{
+              '--ListItemDecorator-size': '24px',
+              '--ListItem-minHeight': '40px',
+              '--ListDivider-gap': '4px',
+              minWidth: 200,
+            }}
+          >
+            <MenuItem>
+              <ListItemDecorator>
+                <BubbleChartIcon />
+              </ListItemDecorator>
+              Products
+            </MenuItem>
+            <ListDivider />
+            <MenuItem>Pricing</MenuItem>
+            <MenuItem>
+              Case studies{' '}
+              <Chip
+                variant="outlined"
+                size="sm"
+                sx={{
+                  ml: 'auto',
+                  bgcolor: (theme) =>
+                    `rgba(${theme.vars.palette.primary.mainChannel} / 0.1)`,
+                }}
+              >
+                Beta
+              </Chip>
+            </MenuItem>
+          </Menu>
+        </Dropdown>
       </Box>
       <Box sx={{ display: 'flex', flexShrink: 0, gap: 2 }}>
         <Button