---
order: 6
title:
zh-CN: 切换菜单类型
en-US: Switch the menu type
---
## zh-CN
展示动态切换模式。
## en-US
Show the dynamic switching mode (between `inline` and `vertical`).
```jsx
import { Menu, Switch, Divider } from 'antd';
import {
MailOutlined,
CalendarOutlined,
AppstoreOutlined,
SettingOutlined,
LinkOutlined,
} from '@ant-design/icons';
const { SubMenu } = Menu;
const Demo = () => {
const [mode, setMode] = React.useState('inline');
const [theme, setTheme] = React.useState('light');
const changeMode = value => {
setMode(value ? 'vertical' : 'inline');
};
const changeTheme = value => {
setTheme(value ? 'dark' : 'light');
};
return (
<>
Change Mode
Change Style
);
};
ReactDOM.render(, mountNode);
```