---
order: 5
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;
class Sider extends React.Component {
state = {
mode: 'inline',
theme: 'light',
};
changeMode = value => {
this.setState({
mode: value ? 'vertical' : 'inline',
});
};
changeTheme = value => {
this.setState({
theme: value ? 'dark' : 'light',
});
};
render() {
return (
<>
Change Mode
Change Style
);
}
}
ReactDOM.render(, mountNode);
```