Menu导航菜单

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

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

    水平的顶部导航菜单。

    Menu 导航菜单 - 图2

    内嵌菜单

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

    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);

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

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

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

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

    Menu 导航菜单 - 图5

    垂直菜单

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

    Menu 导航菜单 - 图7

    切换菜单类型

    展示动态切换模式。

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

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