• Menu导航菜单
    • 何时使用
    • 代码演示
    • API
      • Menu
      • Menu.Item
      • Menu.SubMenu
      • Menu.ItemGroup
      • Menu.Divider

    Menu导航菜单

    为页面和功能提供导航的菜单列表。

    何时使用

    导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

    更多布局和导航的使用可以参考：通用布局。

    代码演示

    Menu 导航菜单 - 图1

    顶部导航

    水平的顶部导航菜单。

    1. import { Menu, Icon } from 'antd';
    3. const SubMenu = Menu.SubMenu;
    4. const MenuItemGroup = Menu.ItemGroup;
    6. class App extends React.Component {
    7.   state = {
    8.     current: 'mail',
    9.   };
    11.   handleClick = e => {
    12.     console.log('click ', e);
    13.     this.setState({
    14.       current: e.key,
    15.     });
    16.   };
    18.   render() {
    19.     return (
    20.       <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
    21.         <Menu.Item key="mail">
    22.           <Icon type="mail" />
    23.           Navigation One
    24.         </Menu.Item>
    25.         <Menu.Item key="app" disabled>
    26.           <Icon type="appstore" />
    27.           Navigation Two
    28.         </Menu.Item>
    29.         <SubMenu
    30.           title={
    31.             <span className="submenu-title-wrapper">
    32.               <Icon type="setting" />
    33.               Navigation Three - Submenu
    34.             </span>
    35.           }
    36.         >
    37.           <MenuItemGroup title="Item 1">
    38.             <Menu.Item key="setting:1">Option 1</Menu.Item>
    39.             <Menu.Item key="setting:2">Option 2</Menu.Item>
    40.           </MenuItemGroup>
    41.           <MenuItemGroup title="Item 2">
    42.             <Menu.Item key="setting:3">Option 3</Menu.Item>
    43.             <Menu.Item key="setting:4">Option 4</Menu.Item>
    44.           </MenuItemGroup>
    45.         </SubMenu>
    46.         <Menu.Item key="alipay">
    47.           <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
    48.             Navigation Four - Link
    49.           </a>
    50.         </Menu.Item>
    51.       </Menu>
    52.     );
    53.   }
    54. }
    56. ReactDOM.render(<App />, mountNode);

    Menu 导航菜单 - 图2

    内嵌菜单

    垂直菜单，子菜单内嵌在菜单区域。

    1. import { Menu, Icon } from 'antd';
    3. const SubMenu = Menu.SubMenu;
    4. const MenuItemGroup = Menu.ItemGroup;
    6. class Sider extends React.Component {
    7.   handleClick = e => {
    8.     console.log('click ', e);
    9.   };
    11.   render() {
    12.     return (
    13.       <Menu
    14.         onClick={this.handleClick}
    15.         style={{ width: 256 }}
    16.         defaultSelectedKeys={['1']}
    17.         defaultOpenKeys={['sub1']}
    18.         mode="inline"
    19.       >
    20.         <SubMenu
    21.           key="sub1"
    22.           title={
    23.             <span>
    24.               <Icon type="mail" />
    25.               <span>Navigation One</span>
    26.             </span>
    27.           }
    28.         >
    29.           <MenuItemGroup key="g1" title="Item 1">
    30.             <Menu.Item key="1">Option 1</Menu.Item>
    31.             <Menu.Item key="2">Option 2</Menu.Item>
    32.           </MenuItemGroup>
    33.           <MenuItemGroup key="g2" title="Item 2">
    34.             <Menu.Item key="3">Option 3</Menu.Item>
    35.             <Menu.Item key="4">Option 4</Menu.Item>
    36.           </MenuItemGroup>
    37.         </SubMenu>
    38.         <SubMenu
    39.           key="sub2"
    40.           title={
    41.             <span>
    42.               <Icon type="appstore" />
    43.               <span>Navigation Two</span>
    44.             </span>
    45.           }
    46.         >
    47.           <Menu.Item key="5">Option 5</Menu.Item>
    48.           <Menu.Item key="6">Option 6</Menu.Item>
    49.           <SubMenu key="sub3" title="Submenu">
    50.             <Menu.Item key="7">Option 7</Menu.Item>
    51.             <Menu.Item key="8">Option 8</Menu.Item>
    52.           </SubMenu>
    53.         </SubMenu>
    54.         <SubMenu
    55.           key="sub4"
    56.           title={
    57.             <span>
    58.               <Icon type="setting" />
    59.               <span>Navigation Three</span>
    60.             </span>
    61.           }
    62.         >
    63.           <Menu.Item key="9">Option 9</Menu.Item>
    64.           <Menu.Item key="10">Option 10</Menu.Item>
    65.           <Menu.Item key="11">Option 11</Menu.Item>
    66.           <Menu.Item key="12">Option 12</Menu.Item>
    67.         </SubMenu>
    68.       </Menu>
    69.     );
    70.   }
    71. }
    73. ReactDOM.render(<Sider />, mountNode);

    Menu 导航菜单 - 图3

    缩起内嵌菜单

    内嵌菜单可以被缩起/展开。

    你可以在 Layout 里查看侧边布局结合的完整示例。

    1. import { Menu, Icon, Button } from 'antd';
    3. const SubMenu = Menu.SubMenu;
    5. class App extends React.Component {
    6.   state = {
    7.     collapsed: false,
    8.   };
    10.   toggleCollapsed = () => {
    11.     this.setState({
    12.       collapsed: !this.state.collapsed,
    13.     });
    14.   };
    16.   render() {
    17.     return (
    18.       <div style={{ width: 256 }}>
    19.         <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
    20.           <Icon type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} />
    21.         </Button>
    22.         <Menu
    23.           defaultSelectedKeys={['1']}
    24.           defaultOpenKeys={['sub1']}
    25.           mode="inline"
    26.           theme="dark"
    27.           inlineCollapsed={this.state.collapsed}
    28.         >
    29.           <Menu.Item key="1">
    30.             <Icon type="pie-chart" />
    31.             <span>Option 1</span>
    32.           </Menu.Item>
    33.           <Menu.Item key="2">
    34.             <Icon type="desktop" />
    35.             <span>Option 2</span>
    36.           </Menu.Item>
    37.           <Menu.Item key="3">
    38.             <Icon type="inbox" />
    39.             <span>Option 3</span>
    40.           </Menu.Item>
    41.           <SubMenu
    42.             key="sub1"
    43.             title={
    44.               <span>
    45.                 <Icon type="mail" />
    46.                 <span>Navigation One</span>
    47.               </span>
    48.             }
    49.           >
    50.             <Menu.Item key="5">Option 5</Menu.Item>
    51.             <Menu.Item key="6">Option 6</Menu.Item>
    52.             <Menu.Item key="7">Option 7</Menu.Item>
    53.             <Menu.Item key="8">Option 8</Menu.Item>
    54.           </SubMenu>
    55.           <SubMenu
    56.             key="sub2"
    57.             title={
    58.               <span>
    59.                 <Icon type="appstore" />
    60.                 <span>Navigation Two</span>
    61.               </span>
    62.             }
    63.           >
    64.             <Menu.Item key="9">Option 9</Menu.Item>
    65.             <Menu.Item key="10">Option 10</Menu.Item>
    66.             <SubMenu key="sub3" title="Submenu">
    67.               <Menu.Item key="11">Option 11</Menu.Item>
    68.               <Menu.Item key="12">Option 12</Menu.Item>
    69.             </SubMenu>
    70.           </SubMenu>
    71.         </Menu>
    72.       </div>
    73.     );
    74.   }
    75. }
    77. ReactDOM.render(<App />, mountNode);

    Menu 导航菜单 - 图4

    只展开当前父级菜单

    点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。

    1. import { Menu, Icon } from 'antd';
    3. const SubMenu = Menu.SubMenu;
    5. class Sider extends React.Component {
    6.   // submenu keys of first level
    7.   rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
    9.   state = {
    10.     openKeys: ['sub1'],
    11.   };
    13.   onOpenChange = openKeys => {
    14.     const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
    15.     if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
    16.       this.setState({ openKeys });
    17.     } else {
    18.       this.setState({
    19.         openKeys: latestOpenKey ? [latestOpenKey] : [],
    20.       });
    21.     }
    22.   };
    24.   render() {
    25.     return (
    26.       <Menu
    27.         mode="inline"
    28.         openKeys={this.state.openKeys}
    29.         onOpenChange={this.onOpenChange}
    30.         style={{ width: 256 }}
    31.       >
    32.         <SubMenu
    33.           key="sub1"
    34.           title={
    35.             <span>
    36.               <Icon type="mail" />
    37.               <span>Navigation One</span>
    38.             </span>
    39.           }
    40.         >
    41.           <Menu.Item key="1">Option 1</Menu.Item>
    42.           <Menu.Item key="2">Option 2</Menu.Item>
    43.           <Menu.Item key="3">Option 3</Menu.Item>
    44.           <Menu.Item key="4">Option 4</Menu.Item>
    45.         </SubMenu>
    46.         <SubMenu
    47.           key="sub2"
    48.           title={
    49.             <span>
    50.               <Icon type="appstore" />
    51.               <span>Navigation Two</span>
    52.             </span>
    53.           }
    54.         >
    55.           <Menu.Item key="5">Option 5</Menu.Item>
    56.           <Menu.Item key="6">Option 6</Menu.Item>
    57.           <SubMenu key="sub3" title="Submenu">
    58.             <Menu.Item key="7">Option 7</Menu.Item>
    59.             <Menu.Item key="8">Option 8</Menu.Item>
    60.           </SubMenu>
    61.         </SubMenu>
    62.         <SubMenu
    63.           key="sub4"
    64.           title={
    65.             <span>
    66.               <Icon type="setting" />
    67.               <span>Navigation Three</span>
    68.             </span>
    69.           }
    70.         >
    71.           <Menu.Item key="9">Option 9</Menu.Item>
    72.           <Menu.Item key="10">Option 10</Menu.Item>
    73.           <Menu.Item key="11">Option 11</Menu.Item>
    74.           <Menu.Item key="12">Option 12</Menu.Item>
    75.         </SubMenu>
    76.       </Menu>
    77.     );
    78.   }
    79. }
    81. ReactDOM.render(<Sider />, mountNode);

    Menu 导航菜单 - 图5

    垂直菜单

    子菜单是弹出的形式。

    1. import { Menu, Icon } from 'antd';
    3. const SubMenu = Menu.SubMenu;
    4. const MenuItemGroup = Menu.ItemGroup;
    6. function handleClick(e) {
    7.   console.log('click', e);
    8. }
    10. ReactDOM.render(
    11.   <Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
    12.     <SubMenu
    13.       key="sub1"
    14.       title={
    15.         <span>
    16.           <Icon type="mail" />
    17.           <span>Navigation One</span>
    18.         </span>
    19.       }
    20.     >
    21.       <MenuItemGroup title="Item 1">
    22.         <Menu.Item key="1">Option 1</Menu.Item>
    23.         <Menu.Item key="2">Option 2</Menu.Item>
    24.       </MenuItemGroup>
    25.       <MenuItemGroup title="Iteom 2">
    26.         <Menu.Item key="3">Option 3</Menu.Item>
    27.         <Menu.Item key="4">Option 4</Menu.Item>
    28.       </MenuItemGroup>
    29.     </SubMenu>
    30.     <SubMenu
    31.       key="sub2"
    32.       title={
    33.         <span>
    34.           <Icon type="appstore" />
    35.           <span>Navigation Two</span>
    36.         </span>
    37.       }
    38.     >
    39.       <Menu.Item key="5">Option 5</Menu.Item>
    40.       <Menu.Item key="6">Option 6</Menu.Item>
    41.       <SubMenu key="sub3" title="Submenu">
    42.         <Menu.Item key="7">Option 7</Menu.Item>
    43.         <Menu.Item key="8">Option 8</Menu.Item>
    44.       </SubMenu>
    45.     </SubMenu>
    46.     <SubMenu
    47.       key="sub4"
    48.       title={
    49.         <span>
    50.           <Icon type="setting" />
    51.           <span>Navigation Three</span>
    52.         </span>
    53.       }
    54.     >
    55.       <Menu.Item key="9">Option 9</Menu.Item>
    56.       <Menu.Item key="10">Option 10</Menu.Item>
    57.       <Menu.Item key="11">Option 11</Menu.Item>
    58.       <Menu.Item key="12">Option 12</Menu.Item>
    59.     </SubMenu>
    60.   </Menu>,
    61.   mountNode,
    62. );

    Menu 导航菜单 - 图6

    主题

    内建了两套主题 light|dark，默认 light。

    1. import { Menu, Icon, Switch } from 'antd';
    3. const SubMenu = Menu.SubMenu;
    5. class Sider extends React.Component {
    6.   state = {
    7.     theme: 'dark',
    8.     current: '1',
    9.   };
    11.   changeTheme = value => {
    12.     this.setState({
    13.       theme: value ? 'dark' : 'light',
    14.     });
    15.   };
    17.   handleClick = e => {
    18.     console.log('click ', e);
    19.     this.setState({
    20.       current: e.key,
    21.     });
    22.   };
    24.   render() {
    25.     return (
    26.       <div>
    27.         <Switch
    28.           checked={this.state.theme === 'dark'}
    29.           onChange={this.changeTheme}
    30.           checkedChildren="Dark"
    31.           unCheckedChildren="Light"
    32.         />
    33.         <br />
    34.         <br />
    35.         <Menu
    36.           theme={this.state.theme}
    37.           onClick={this.handleClick}
    38.           style={{ width: 256 }}
    39.           defaultOpenKeys={['sub1']}
    40.           selectedKeys={[this.state.current]}
    41.           mode="inline"
    42.         >
    43.           <SubMenu
    44.             key="sub1"
    45.             title={
    46.               <span>
    47.                 <Icon type="mail" />
    48.                 <span>Navigation One</span>
    49.               </span>
    50.             }
    51.           >
    52.             <Menu.Item key="1">Option 1</Menu.Item>
    53.             <Menu.Item key="2">Option 2</Menu.Item>
    54.             <Menu.Item key="3">Option 3</Menu.Item>
    55.             <Menu.Item key="4">Option 4</Menu.Item>
    56.           </SubMenu>
    57.           <SubMenu
    58.             key="sub2"
    59.             title={
    60.               <span>
    61.                 <Icon type="appstore" />
    62.                 <span>Navigtion Two</span>
    63.               </span>
    64.             }
    65.           >
    66.             <Menu.Item key="5">Option 5</Menu.Item>
    67.             <Menu.Item key="6">Option 6</Menu.Item>
    68.             <SubMenu key="sub3" title="Submenu">
    69.               <Menu.Item key="7">Option 7</Menu.Item>
    70.               <Menu.Item key="8">Option 8</Menu.Item>
    71.             </SubMenu>
    72.           </SubMenu>
    73.           <SubMenu
    74.             key="sub4"
    75.             title={
    76.               <span>
    77.                 <Icon type="setting" />
    78.                 <span>Navigation Three</span>
    79.               </span>
    80.             }
    81.           >
    82.             <Menu.Item key="9">Option 9</Menu.Item>
    83.             <Menu.Item key="10">Option 10</Menu.Item>
    84.             <Menu.Item key="11">Option 11</Menu.Item>
    85.             <Menu.Item key="12">Option 12</Menu.Item>
    86.           </SubMenu>
    87.         </Menu>
    88.       </div>
    89.     );
    90.   }
    91. }
    93. ReactDOM.render(<Sider />, mountNode);

    Menu 导航菜单 - 图7

    切换菜单类型

    展示动态切换模式。

    1. import { Menu, Icon, Switch } from 'antd';
    3. const { SubMenu } = Menu;
    5. class Sider extends React.Component {
    6.   state = {
    7.     mode: 'inline',
    8.     theme: 'light',
    9.   };
    11.   changeMode = value => {
    12.     this.setState({
    13.       mode: value ? 'vertical' : 'inline',
    14.     });
    15.   };
    17.   changeTheme = value => {
    18.     this.setState({
    19.       theme: value ? 'dark' : 'light',
    20.     });
    21.   };
    23.   render() {
    24.     return (
    25.       <div>
    26.         <Switch onChange={this.changeMode} /> Change Mode
    27.         <span className="ant-divider" style={{ margin: '0 1em' }} />
    28.         <Switch onChange={this.changeTheme} /> Change Theme
    29.         <br />
    30.         <br />
    31.         <Menu
    32.           style={{ width: 256 }}
    33.           defaultSelectedKeys={['1']}
    34.           defaultOpenKeys={['sub1']}
    35.           mode={this.state.mode}
    36.           theme={this.state.theme}
    37.         >
    38.           <Menu.Item key="1">
    39.             <Icon type="mail" />
    40.             Navigation One
    41.           </Menu.Item>
    42.           <Menu.Item key="2">
    43.             <Icon type="calendar" />
    44.             Navigation Two
    45.           </Menu.Item>
    46.           <SubMenu
    47.             key="sub1"
    48.             title={
    49.               <span>
    50.                 <Icon type="appstore" />
    51.                 <span>Navigation Three</span>
    52.               </span>
    53.             }
    54.           >
    55.             <Menu.Item key="3">Option 3</Menu.Item>
    56.             <Menu.Item key="4">Option 4</Menu.Item>
    57.             <SubMenu key="sub1-2" title="Submenu">
    58.               <Menu.Item key="5">Option 5</Menu.Item>
    59.               <Menu.Item key="6">Option 6</Menu.Item>
    60.             </SubMenu>
    61.           </SubMenu>
    62.           <SubMenu
    63.             key="sub2"
    64.             title={
    65.               <span>
    66.                 <Icon type="setting" />
    67.                 <span>Navigation Four</span>
    68.               </span>
    69.             }
    70.           >
    71.             <Menu.Item key="7">Option 7</Menu.Item>
    72.             <Menu.Item key="8">Option 8</Menu.Item>
    73.             <Menu.Item key="9">Option 9</Menu.Item>
    74.             <Menu.Item key="10">Option 10</Menu.Item>
    75.           </SubMenu>
    76.         </Menu>
    77.       </div>
    78.     );
    79.   }
    80. }
    82. ReactDOM.render(<Sider />, mountNode);

    API

    1. <menu>
    2.   <Menu.Item>菜单项</Menu.Item>
    3.   <SubMenu title="子菜单">
    4.     <Menu.Item>子菜单项</Menu.Item>
    5.   </SubMenu>
    6. </menu>

    Menu

    参数说明类型默认值
    defaultOpenKeys初始展开的 SubMenu 菜单项 key 数组string[]
    defaultSelectedKeys初始选中的菜单项 key 数组string[]
    forceSubMenuRender在子菜单展示之前就渲染进 DOMbooleanfalse
    inlineCollapsedinline 时菜单是否收起状态boolean-
    inlineIndentinline 模式的菜单缩进宽度number24
    mode菜单类型，现在支持垂直、水平、和内嵌模式三种string: vertical horizontal inlinevertical
    multiple是否允许多选booleanfalse
    openKeys当前展开的 SubMenu 菜单项 key 数组string[]
    selectable是否允许选中booleantrue
    selectedKeys当前选中的菜单项 key 数组string[]
    style根节点样式object
    subMenuCloseDelay用户鼠标离开子菜单后关闭延时，单位：秒number0.1
    subMenuOpenDelay用户鼠标进入子菜单后开启延时，单位：秒number0
    theme主题颜色string: light darklight
    onClick点击 MenuItem 调用此函数function({ item, key, keyPath, domEvent })-
    onDeselect取消选中时调用，仅在 multiple 生效function({ item, key, keyPath, selectedKeys, domEvent })-
    onOpenChangeSubMenu 展开/关闭的回调function(openKeys: string[])noop
    onSelect被选中时调用function({ item, key, keyPath, selectedKeys, domEvent })无
    overflowedIndicator自定义 Menu 折叠时的图标ReactNode-

    More options in rc-menu

    Menu.Item

    参数说明类型默认值
    disabled是否禁用booleanfalse
    keyitem 的唯一标志string
    title设置收缩时展示的悬浮标题string

    Menu.SubMenu

    参数说明类型默认值
    children子菜单的菜单项Array<MenuItem|SubMenu>
    disabled是否禁用booleanfalse
    key唯一标志string
    title子菜单项值string|ReactNode
    onTitleClick点击子菜单标题function({ key, domEvent })

    Menu.ItemGroup

    参数说明类型默认值
    children分组的菜单项MenuItem[]
    title分组标题string|ReactNode

    Menu.Divider

    菜单项分割线，只用在弹出菜单内。